daninthemix daninthemix - 15 days ago 4
Javascript Question

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

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?

Answer

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.