https://github.com/4awpawz/bundlewithparcel
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.
https://github.com/4awpawz/bundlewithparcel
Last synced: 19 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/4awpawz/bundlewithparcel
- Owner: 4awpawz
- Created: 2021-05-01T14:41:12.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-31T15:58:02.000Z (about 4 years ago)
- Last Synced: 2024-05-07T11:51:20.609Z (about 1 year ago)
- Language: HTML
- Homepage:
- Size: 371 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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_:
```shell
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_:
```json
"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"
},
```
2. 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.
1. `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*.
1. `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.
```shell
npm run build
```
3. 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*.
1. 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*.
1. The script then calls `trio c -m` which instructs Trio to *cache bust the release folder* and to generate the *buster.manifest.json file*.
1. The script then calls `trio s -r` which instructs Trio to *serve the site in the browser*.
```shell
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.
```json
{
"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.