How / why to switch from <script> includes to npm installs?

Question

I have a VueJS project that uses npm to manage all the Vue stuff (vue-resource, router, Vuex etc). But in my index.html file I've also got a bunch of other stuff included via script tags:

Bootstrap
jQuery
Tween

Would it be beneficial to include them via NPM instead, so they are (presumably?) bundled in the main build file? If so, how exactly do I do this?

Please read How to Ask. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey
– Heretic Monkey, Commented Nov 21, 2016 at 17:38
This question is actually more interesting and meaningful than it looks. Even though NPM is the modern standard for Javascript development, there is definitely no use in it, as opposed to a bunch of script tags pointing at CDN, in some cases. — rishat
– rishat, Commented Nov 21, 2016 at 17:44
It's too broad. There are at least 10 different "bundlers" out there, each with different requirements and commands, and which one is the "best" cannot be objectively defined. "How can I bundle scripts" is a question which would really require a tutorial, which are many on the internet. — Heretic Monkey
– Heretic Monkey, Commented Nov 21, 2016 at 17:57

Samuel Reid · Accepted Answer · 2016-11-22 18:07:20Z

2

The dependencies need to be bundled up into one normal javascript file in order for a browser to be able to read it.

In your project directory, you'll run these commands:

npm install bootstrap

npm install jquery

npm install tween

And wherever you want, run this command:

npm install --global browserify

Then create a javascript file (app.js) in your project directory like so:

require('bootstrap')
window.$ = window.jQuery = require('jquery');
window.TWEEN = require('tween.js')
// rest of code...

And save that file. Then run the following command:

browserify app.js -o bundle.js

Then in your html file, have this script tag:

<script src="bundle.js"></script>

You'll need to rerun that browserify command every time you make a change to app.js, so take a look at gulp.

edited Nov 22, 2016 at 18:07

answered Nov 21, 2016 at 17:45

Samuel Reid

1,7761 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Samuel Reid Over a year ago

In the specific case of jQuery, you may run into some issues with this. stackoverflow.com/questions/11379692/…

daninthemix Over a year ago

Thanks for the reply. I've run the npm commands, and tried to include the 'require' statements in my already existing main.js file that I believe gets compiled by browserify along with everything else, but this results in 'jquery is not defined' in the console.

craig_h Over a year ago

Browserify does not bundle libraries into the global scope, so if you want to do that you need to attach it to window like so: window.$ = window.jQuery = require('jquery'); you should then be able to use it as normal.

Samuel Reid Over a year ago

Taking from what @craig_h said, in my example that would mean this: in app.js after all the requires just add his line: window.$ = window.jQuery = require('jquery');

RyanZim Over a year ago

@SamuelReid gulp isn't the only option, in this case, a simple npm script would do. However, if he's already using a build tool for vue-related stuff, it would be best to run browserify with that.

|

Collectives™ on Stack Overflow

How / why to switch from <script> includes to npm installs?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related