CODEWITHSUNDEEP
javascriptangularjsnode.jsbuildgulp
SmeagolGollum
SmeagolGollum

Reputation: 107

How to assembly js libs in an angular application

I'm starting my first angular application (for information, it is angular2). I am starting to learn tools like nodejs, gulp, etc...

I have a nodejs server, which serves server stuff and front stuff.

For the front stuff, I have html, css, resources, and my js files. For it working with angular, I have all required dependencies in node_modules.

I'm ok with typescripts management with gulp. I have successfully managed to have my app js files concatenated in a "build" target folder.

Now, I want to copy there also my libs/dependencies, so that my index.html will have 2 script include : myapp.js and something like libs.js (minified angular and possibly any other libs).

I cannot find a way to do that. I got a result with webpack, but it minifies all my app in the libs.js file, and I want my app separate so that I can debug it in non minified js for dev mode.

Is there a way to extract from node_modules any required libs for the app, minify them and concat them in a compact libs.js ?

When I parse the node_modules, it is a huge repository (mainly due to server dependencies with stuff like gulp, mocha, ... nothing useful for the frontend), and I'm pretty sure that taking all node_modules/**/*.js and concat then is not a good idea!

Thank you for any response.

Upvotes: 0

Views: 391

Answers (1)

L. Catallo
L. Catallo

Reputation: 563

You can use browserify. It allows you to use the require() function like you do in node.js. There is also a gulp plugin.

So for example if you want to use lodash, first you run npm install --save lodash, then in your javascript you will have:

var _ = require('lodash');
// from here you can use lodash like normal

The files can be both compiled by your node server or precompiled by gulp.

Once compiled, the files will be bundled with every dependency you declared using require()

EDIT

To answer your comment, if you want to export a separate file including only the libraries, you can do this

libs.js 
window._ = require('lodash');
window.$ = require('jquery');
// any other library
app.js 
// here you can use the libraries like normal
console.log(_);
console.log($);
index.html 
<script type="text/javascript" src="js/libs.js"></script>
<script type="text/javascript" src="js/app.js"></script>

But personally I prefer to have only one file with everything bundled.

Upvotes: 0

Related Questions