If you don't know why you should use bundlers, read up Why webpack.
- By far the most used bundler with a lot of community made extensions
- Primarily used by libraries like React, Vue
- New bundler famous for zero-config, and super fast building process
These bundlers allows you to
- write modular, organised source code
- use npm packages for front-end (dashboard/graphics)
- use JSX/TSX, Vue single file component
- write in other languages like TypeScript
- and many more
This tutorial goes through the setup using parcel.
Basically you will have parcel to output the whole
directory. Your project would look like this
When you run parcel, it will make
graphics directory and
output bundle result into them.
(After running parcel)
The random string for each generated files are automatically generated to refresh cache when the files change.
As I said, parcel is (literally) zero-configuration required. It even installs missing packages for you if there is any.
Add parcel to your bundle
parcel command will be available locally. You can run it either adding
npm scripts, or
parcel command should be available globally. Just run
run the bundler.
Make an entrypoint
When building front-end, HTML file is usually used as entrypoint. You can just use your HTML file with your scripts and stylesheets imported.
The entrypoint HTML file will also be compiled in the bundler. So you can have many
kind of files in the
script tag. Parcel will automatically detect file format
and use an appropriate library/compiler to bundle the file.
Or the entrypoint doesn't even have to be an HTML file. For example, you can use Pug to have common parts of HTML file into one file.
Run the command
For development, with file change detection and hot-reloading:
For production build, with optimized output:
src/dashboard/index.html with your entrypoint files.)
You can use a glob pattern to use multiple entrypoints, if you have multiple pages to compile
Details described in the reference.
Even though it already works for most cases (!), a bit of configuration might be recommended/required.
Parcel uses babel out of box, and the default supported
>0.25% which includes old browsers like IE.
Considering how NodeCG is used, it's the best to target only modern browsers or
just Chrome. To do so, add
browserslist property to
Refer to this page for
Due to the huge amount of features parcel offers out of box, at this point you already have a lot more options for your front-end development. For example:
- React development with JSX/TSX
- Vue single file component
- TypeScript or other alternative languages
Also, if your project becomes too advanced for parcel to handle, you can switch to webpack. It produces a bit more optimized code, and has a lot more features supported.