If I install a module via npm, what is the proper way to use the code in my website? I mean simply making node_modules static seems ridiculous, but I can't figure out how to easily create a static folder with the few pieces of JS I want to use in it.
Of course there are symbolic links and a lot of hacks I can think of off the top of my head, but I was just curious if there is a known workflow/way to solve this problem that I simply haven't read about yet.
Browserify and Webpack are the tools usually chosen to bundle up modules managed through npm for deployment to be used client side.
You want webpack
webpack supports pre-processing files via loaders. This allows you to
bundle any static resource not only javascript. You can easily write
your own loaders running in node.js.
Related
I have a problem which can be easily solved by importing an external JS library into Node.js. However, this library does not exist in NPM.
I found out an old solution on StackOverflow which seems to fix the problem. However, it looks wierd.
Is there a more convenient solution in 2k20 to use external JS library methods into my Node.js code?
If your library have a package.json: You can install the package directly from the git repository, for example npm install https://github.com/vendor-creator/vendor-package. NOTE that for this method to work, in cases where the module has to be built, the git repository should contain a dist/ folder containing the built code or have in its package.json, a prepare step responsible for building the package upon installation.
If your library does not have a package.json and is simply a vanilla JavaScript file like the Lodash JavaScript file, I would advise just like in the post you linked, to create a vendor.js file (.min if the script is minified), copy and paste the content of the file and require it. Be aware that some libraries using CDN and not NPM, are designed for browser environment and may lack CommonJS support preventing you from using require. In that case you'll have to modify the library source code.
If it's a small library, there is no need to create an advanced build system. If the library is stable, just copy and paste it and you'll be fine. When in doubt always follow the K.I.S.S principle.
Once npm and nodejs installed, it is possible to easily use a module by running
npm install module
and then using the js require() function. I assume the source code stored somewhere on my computer will then be loaded. But what if I want to use javascript functions of this module within a client's browser ? With a bit of work, I can probably end up finding some file on my disk, or maybe on the web, with the source code I need inside it. My question is : is there a standard process that gathers all the dependencies of a given module, so I can serve them on a client website ? Or do I totally miss something and things are suppose to be done in an entirely different way ?
If the library is published as standard javascript modules, you can load it directly into the browser, as in this example:
<script type="module">
import { html, render } from '/node_modules/lit-html/lit-html.js';
render(html`<span>Hello, world</span>, document.body)
</script>
The unpkg service provides a useful tool to automatically transform module specifiers to absolute URLs, you just have to add the ?module query string:
import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';
If, however, as is (unfortunately commonly) the case, the library is published as CJS modules, you'll need to use a module bundler. I'm partial to rollup. To roll cjs modules up in your bundle, make sure to install and use the rollup-plugin-commonjs plugin.
There are a variety of tools available to merge your dependencies into a single file that can be consumed by a web browser. Such tools are typically referred to as "bundlers".
A few popular examples include:
Webpack
Browserify
Parcel
This list is not meant to be comprehensive or even a recommendation of which tool to use.
is it somehow possible to build NodeJS together with some selected JavaScript modules? I believe that for native modules, I should be able to achieve this with node-gyp, but I have no idea how to do this for JavaScript modules. The main idea is to be able to use custom application without npm install.
I know that I can use any of the bundlers like pkg or nexe, but this has some drawbacks with respect to the development...
Thanks!
You can include JS files as described in here.
Just add a link-module parameter.
> .\vcbuild link-module './myCustomModule.js'
I'm trying to learn a modern Javascript workflow for client-side development, so I'm giving a try to Grunt.
I want to require some libraries like AngularJS, Bootstrap or moment.js and have them installed in my dist directory. If possible I would like to have some package management for them.
I've given a look at Bower and grunt-bower-task, but I'm not sure up to which point they are suitable for this task, as not all packages include minified versions and grunt-bower-task seems to ignore those anyway.
Is there a Grunt-friendly package management solution to manage client-side Javascript libraries or should I keep downloading them to a vendor folder and just tell Grunt to copy them to the dist folder in their .js or .min.js variant?
I think bower and grunt have different responsabilities. Bower for client package management and grunt for building (and other tasks). At least I use them for that. Installing angularjs and bootstrap with bower, it downloads both minified and development libraries. If not you can always minified them with grunt.
And yes, i believe that controlling your packages with bower and building your application with grunt (using copy, concat, uglify, etc. tasks) is the best practice.
You can check Component also, its an equivalent for bower.
I tried to hack something like this up once using grunt-curl - just defining a list of libraries I wanted to include, and downloading them from cdnjs.com, which I believe keeps the links updated to current versions. I did this within a separate install task.
It wasn't the most elegant solution, but it did what I needed at the time. I probably wouldn't suggest it if you're wanting stronger control of the packages (ie. versions) you use - but then again if you do, why not just use Bower?
I have been creating projects using npm. For AMD I am using the native node require because it is convenient and does what I need it to do. To run my projects at the moment I am using grunt-watchify. This allows me to point a file of entry and a file of output. So at the moment it produces one file uncompressed or mangled.
I would like to know what is the best approach for compressing and mangling my final file. I have tried uglify after the file is built by watchify but it does not seem to work correctly. I feel that is a dirty hack anyway. So here is my questions?
What is the best way to build a node project into one file? Grunt library suggestions would be great. Any that support compression/minifying would also be great.
Thanks
Removed my dependency on grunt-watchify and now just use grunt-browersify and grunt-contrib-watch. I then use grunt-contrib-uglify and grunt-contrib-cssmin to minimize files afterwards.