Skip to content

This project demonstrates how to incorporate JavaScript bundling into your Trio projects using Parcel and NPM scripts. Using the same steps you can easily use your task runner and JavaScript bundler of choice.

Notifications You must be signed in to change notification settings

4awpawz/bundlewithparcel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

About

This project demonstrates just one of many ways that you can incorporate JavaScript bundling into your Trio projects. Specifically, this approach uses Parcel and NPM scripts but please note that Trio does not limit you to using just Parcel and NPM and in fact you are free to use whatever JavaScript bundler (e.g. Parcel, Browserify, Rollup.js, Webpack) and task runner (e.g. package.json scripts, Grunt, Gulp) that you prefer.


Installation

  1. Download this project's zip file to your computer and unpack it.

  2. Open a terminal and make the folder you unpacked this project's zip file into the current working folder.

  3. From the terminal, run the following to install this project's 2 development dependencies - concurrently and parcel-bundler:

npm install

Scripting JavaScript Bundling

  1. Using your editor, please examine the package.json file, which is located in the project's root folder. Specifically please take notice of the 2 NPM scripts, build and release:
"scripts": {
    "parcel-watch": "parcel watch source/jsBundle/main.js --no-cache --out-dir source/scripts --public-url /scripts/",
    "trioBuild": "trio b -I",
    "build": "concurrently --kill-others \"npm run trioBuild\" \"npm run parcel-watch\"",
    "release": "trio r && parcel build source/jsBundle/main.js --no-cache --out-dir release/scripts --public-url /scripts/ && trio c -m && trio s -r"
},
  1. When you run the build script to build the site for development here is what happens:
    1. concurrently is called to run the remaining 2 items in the build script concurrently.
    2. npm run trioBuild is called which calls trio b -I (a shortcut for trio b -iws) which instructs Trio to build the project incrementally any time a file in the source folder is changed (excluding ignore files - see below) and to serve the site in the browser.
    3. parcel-watch is called next and instructs Parcel to target the source/jsBundle/main.js file and to write the generated JavaScript bundle to the source/scripts folder. It also instructs Parcel to embed a project relative URL into the JavaScript bundle which points to the generated map file. This is necessary because Buster, the cache busting package built into Trio's toolchain, requires that URLs that are to be targeted for cache busting must be project relative.
 npm run build
  1. When you run the release script to build the site for release here is what happens:
    1. The script first calls trio r which instructs Trio to buid the site for release.
    2. The script then calls parcel build which instructs Parcel to target the source/jsBundle/main.js file and to write the generated JavaScript bundle to the release/scripts folder. It also instructs Parcel to make the URL that it will embed in the JavaScript bundle file that points to the generated map file relative to the release /scripts/ folder.
    3. The script then calls trio c -m which instructs Trio to cache bust the release folder and to generate the buster.manifest.json file.
    4. The script then calls trio s -r which instructs Trio to serve the site in the browser.
 npm run release

Declare Folders That Trio Should Ignore

Please note that this feature requires Trio v6.0.1 or better.

Finally, using your editor, please examine the trio.json file. Specifically please take notice of the ignore property. This property is used to declare one or more folders that are unrelated to Trio's build and release workflows, such as those used for JavaScript bundling tasks which are driven by the user's inclusion of an external task runner and an external JavaScript bundling application such as Parcel.

{
    "ignore": "jsBundle"
}

If Trio were not to ignore these unrelated folders their content would pollute Trio's metadata as well as possibly causing unnecessary development builds. In the case of this application, any changes made to any files located in the jsBundle folder will be ignored by Trio and will be handled by Parcel via NPM package.json scripts.

About

This project demonstrates how to incorporate JavaScript bundling into your Trio projects using Parcel and NPM scripts. Using the same steps you can easily use your task runner and JavaScript bundler of choice.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages