How to load all dependencies in angular application - javascript

I have quite a big angular application. I am installing all packages using npm install and I am loading them manually in index.html file, for example:
<script src="node_modules/angular/angular.js"></script>
In similar way I am loading other files (controllers, services, etc), for example:
<script type="text/javascript" src="app/app.module.js"></script>
What is the best way to load all necessary files without importing them manually (there are lots of js files in my project)? Is there a good tutorial on how to do it? I can't find any easy and nice solution.

Using Webpack you can easily achieve this and advantage of using this is you can use with any of these grunt, gulp, bower whatever you have used in your web app.
This will generate build for you too.
webpack using grunt
webpack using gulp (archive.org copy from 2017)
webpack using bower
And simplest example of implementation is here example

Using Gulp Or Grunt for build would autogenerate and add imports to index.html.explore https://www.keycdn.com/blog/gulp-vs-grunt/ this would answer your query.

Related

Properly linking to a javascript library installed with npm?

When I install a JS library with npm, say:
npm install chartjs
It places the required JS file in ./node_modules/chartjs/chart.js.
Since I want the file to be located in, say, ./public/js/chart.js, I could just copy and paste it there. But is there a proper way to do that, like linking directly to the file installed by npm ?
Thanks in advance for your help. (Yes I'm kind of new to JS...)
In general, if you are using npm to manage your dependencies then you would use a bundler (such as Rollup, Webpack, or Parcel) to combine them into a browser-friendly file in your distribution directory.
MDN has a tutorial which walks through setting up a basic project in Parcel.

How to convert gulp setup project to normal angular js project without gulp

How can I convert a gulp setup project to normal angular js project without gulp?.
My friend gave me gulp setup project but I need to be able to run it without gulp.
If you're going to use a different build tool, just remove the Gulpfile and any npm dependencies related to gulp. Then install and setup the other build tool.
If you're not going to use a build tool at all, you do the same as above, but have to manually include all the .js files in your html file separately.
I don't suggest you use the latter of the two. Actually, I suggest you keep gulp, as it's a pretty decent tool.
You must have been using gulp for css minifying or some other tasks you can directly remove gulpfile.js file and run the angular project. It is not a problem having gulp it provides many tasks which reduces development effort unless if you trying to migrate to webpack or browserify tools i don't recommend you to delete.

How to only concatenate JS files with webpack

I used to use gulp for merge few static linked JS libraries files into one.
I've installed webpack and add react and few libraries as npm module. It works fine.
Now I want to completely remove gulp so I need to ONLY concatenate JS libraries (lot of jquery plugins and old 1.8 jquery itself). I don't want to install these JS libraries via npm, because it will be too much work.
When I use webpack to bundle these libraries it doesn't work, because webpack wrap these libraries and I can't use these without add requires.
Could you please tell me how to ONLY concatenate JS files into one with webpack?
Thank you.
Webpack is module bundler and that is how it works. If you just want to merge many js file into one then just use another tools like gulp. Webpack is much more.

Browserify: using external libraries from within bundle

Our team develops browser side javascript app. We use angularjs as framework and some helper libraries in global namespace. For example: underscore.
We carried out a large piece of code (input/output data tranformation) into a standalone library for unit testing reasons.
Now i try to use browserify with this library. The question is about what the best way to exclude from bundle shared (with main app) dependences (underscore for example).
I tried 2:
Using --external. I have to create bundle from underscore and use it for all code stuff in app. If i understood right this way seems inconvenient.
Using browser property in package.json to replace underscore with stub:
module.exports = _;
I believe that there is more clean approach, but where is it?
You don't have to use --external or something like that. Just include the library like this:
<script src="external/lib.js"></script>
then you can use it within your bundle (without require).
BUT: In my opinion you shouldn't mix global libs with browserify. All benefits of browserify will decrease drastically this way.
Contras:
more than one file to include
worse readability cause fewer `require` statements
RECOMMEND:
create one bundle with all external libs and install them as npm modules.
npm install --save angular
npm install --save lodash
create external bundle:
browserify -r angular -r lodash > external/libs.js
you only have to bundle it once because they should never change. then create main app bundle without external modules:
browserify --no-bundle-external app.js > bundle.js
then include these two bundles to your page:
<script src="external/libs.js"></script>
<script src="bundle.js"></script>

Browserify: take minified file from node module

I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower

Categories