Menu
I would like to use valid-url to validate some URLs using JSFiddle so that I can share it later. I tried adding a link to the index.js file from Github (https://raw.githubusercontent.com/ogt/valid-url/master/index.js) but Fiddle says:
Github is not a CDN, using it as such will cause issues with loading the file. Do you still with to it?
And obviously when I try to use it, an error is thrown:
Refused to execute script from [...] because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
So, is there any way to use npm packages in a JSFiddle? Or any workaround to achieve this?
412
So, is there any way to use npm packages in a JSFiddle? Or any workaround to achieve this? You can't use code directly from GitHub, but you can include them from rawgit.com. Also, using RequireJS is probably a good idea because you won't be able to use the normal require (...) or import ... syntax on the web. Use unpkg.com.
The default way of using npm modules in Node.js is called CommonJS. To import a module you can use the function require (id). It accepts id as a path to a module. To require a newly installed npm module, you just pass its name as id. Node.js will lookup for the module chalk in the node_modules folder inside the root of your project.
How do I import npm packages in repl.it javascript 1 Go to side bar on the left side. 2 Click on the second option, which is packages. 3 Type the name of the module you are in need of. 4 Click on the name when it appears in the list below. 5 Click on the plus sign.
To require a newly installed npm module, you just pass its name as id. Node.js will lookup for the module chalk in the node_modules folder inside the root of your project. After the import, the constant chalk will hold all the functionality exported by the module chalk. Another approach to importing node modules is called ES6 import.
Use unpkg.com. They allow you to load any npm module from the browser like a CDN.
146
Using UNPKG you can load any file from any package following this pattern
https://unpkg.com/:package@:version/:file
So, if you add
https://unpkg.com/[email protected]/
Then you'll get this (as shown in the next image)
If you specify the index.js file
https://unpkg.com/[email protected]/index.js
Then you'll get this (as shown in the next image)
You'll then be able to use it in your fiddles by adding the Resources you want to.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
