CODEWITHSUNDEEP
javascriptnpmwebpack
Niels Hofmans
Niels Hofmans

Reputation: 100

Simple NPM package bundling/vendoring?

Disclaimer: I am primarely a backend developer with no extensive FE knowledge.

I am writing a non-SPA Golang web application that generates HTML, which is then sent to the user. Because I'd like to update and monitor my Javascript/CSS dependencies better, I want to switch to using NPM with a package.json file instead of manually downloading and appending CSS and Javascript libraries. These are the typical jquery, bootstrap and fontawesome. In addition to this, I have a single Javascript file per page for interactive content.

e.g.

+ js
  lib.js    -> jquery, bootstrap, fontawesome
  - home    -> specific JS
  - account -> specific JS
  ...
+ css
  theme.css
  custom.css

However, I see no simple solution to just npm install and export the installed packages to a vendor.js file, minified. Iv'e looked at webpack (go-webpack), but this horribly complex with the whole tree shaking, bundling and shimming. In addition, webpack expects you to run a development server when serving assets locally, do some chunk magic and still refer to global libraries in every JS file. (to prevent from being tree-shaken away)

Is there an easier way to go from a package.json file to a minified, bundled set of assets?

Upvotes: 2

Views: 1997

Answers (1)

Nathan
Nathan

Reputation: 8149

TLDR: ‘You can’t see the forest for the trees’ - Just get a minimal configuration of webpack.config.js working before diving into more advanced details, such as tree shaking, chunking, etc...

You need to use a bundler, such as Webpack or Parcel, to bundle all your JavaScript assets into a single JavaScript file. I think you're trying to do too much to start with:

As these are more advanced concepts... Perhaps you could start by initially creating a single JavaScript bundle (or a bundle on a per page basis) to be used by your application. This wouldn't be as complex and would require entry points into the following files within your application:

  1. Application's JavaScript index (This should load the JavaScript used by your application)
  2. CSS index. (Ideally, you have a root styling file which loads other application styling files)

Now set-up the appropriate loaders and plugins for your application's assets, such as the MiniCssExtractPlugin, file-loader, etc..., to load and handle your applications' assets. Once everything is working, simply attach this generated bundle in a <script> tag within your root html index page, rather than initially configuring a webpack-dev-server. This will allow your application to use your bundled JavaScript file without the need to configure a webpack-dev-server. To create new bundles create custom commands within the scripts section of your package.json file, something along the lines of:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },

Only after everything is working should you worry about more advanced performance gains, such as: chunking/treeshaking/etc... Take a look at the following tutorials as they may help: Intro to Webpack and Full Stack Web application. Note the second tutorial is a little dated as the defacto now would be to use create-react-app cli instead of setting up the build configurations yourself for a react project, BUT the principles are sound and show you how to go about setting up your own build configuration.

Hopefully that helps!

Upvotes: 2

Related Questions