|
| 1 | +# Basic sample |
| 2 | + |
| 3 | +Let's start with a very basic sample, just add an html plus a simple console log (E5). This is what you can find in the getting started tutorial. |
| 4 | + |
| 5 | +# Steps to build it |
| 6 | + |
| 7 | +## Prerequisites |
| 8 | + |
| 9 | +Install [Node.js and npm](https://nodejs.org/en/) (min v8.9) if they are not already installed on your computer. |
| 10 | + |
| 11 | +> Verify that you are running at least node v8.x.x and npm 5.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors. |
| 12 | +
|
| 13 | +## Steps |
| 14 | + |
| 15 | +- Navigate to the folder where you are going to create the empty project. |
| 16 | + |
| 17 | +- Execute `npm init`, you will be prompted to answer some questions about the project. Once you have successfully answered, a **[package.json](./package.json)** file we will generated. |
| 18 | + |
| 19 | +```bash |
| 20 | +npm init -y |
| 21 | +``` |
| 22 | + |
| 23 | +> Ensure your parent folder does not include any space or uppercase (if that's the case you can just run `npm init` and change the project name). |
| 24 | +
|
| 25 | +- Let's install parcel |
| 26 | + |
| 27 | +```bash |
| 28 | +npm install parcel --save-dev |
| 29 | +``` |
| 30 | + |
| 31 | +- Let's create a basic [/src/index.js](./src/index.js) file (es5 friendly): |
| 32 | + |
| 33 | +_[/src/index.js](./src/index.js)_ |
| 34 | + |
| 35 | +```javascript |
| 36 | +const user = "John Doe"; |
| 37 | + |
| 38 | +console.log(`Hello ${user}!`); |
| 39 | +``` |
| 40 | + |
| 41 | +- Let's create a dummy [/src/index.html](./src/index.html) file |
| 42 | + |
| 43 | +_[/src/index.html](./src/index.html)_ |
| 44 | + |
| 45 | +```html |
| 46 | +<html> |
| 47 | + <body> |
| 48 | + <h1>Check the console log</h1> |
| 49 | + <script type="module" src="./index.js"></script> |
| 50 | + </body> |
| 51 | +</html> |
| 52 | +``` |
| 53 | + |
| 54 | +- Now let's add the following command to our [package.json](./package.json) |
| 55 | + |
| 56 | +_[package.json](./package.json)_ |
| 57 | + |
| 58 | +```diff |
| 59 | + "scripts": { |
| 60 | ++ "build": "parcel ./src/index.html" |
| 61 | +- "test": "echo \"Error: no test specified\" && exit 1" |
| 62 | + }, |
| 63 | +``` |
| 64 | + |
| 65 | +- Let's run the build |
| 66 | + |
| 67 | +```bash |
| 68 | +npm run build |
| 69 | +``` |
| 70 | + |
| 71 | +> A new folder, _[/dist](./dist)_, is generated. It contains the bundled solution. |
| 72 | +
|
| 73 | +- What if we need a production ready version? let's add the following command in our [package.json](./package.json): |
| 74 | + |
| 75 | +_[package.json](./package.json)_ |
| 76 | + |
| 77 | +```diff |
| 78 | + "scripts": { |
| 79 | +- "build": "parcel ./src/index.html" |
| 80 | ++ "build": "parcel ./src/index.html", |
| 81 | ++ "build:prod": "parcel build ./src/index.html" |
| 82 | + }, |
| 83 | +``` |
| 84 | + |
| 85 | +```bash |
| 86 | +npm run build:prod |
| 87 | +``` |
| 88 | + |
| 89 | +What did we do wrong, if the command line we used is apparently OK? |
| 90 | + |
| 91 | +``` |
| 92 | + 5 | "browserslist": "> 0.5%, last 2 versions, not dead", |
| 93 | + > 6 | "main": "index.js", |
| 94 | + > | ^^^^^^^^^^ Did you mean "index.html"? |
| 95 | + 7 | "scripts": { |
| 96 | + 8 | "build": "parcel ./src/index.html", |
| 97 | +``` |
| 98 | + |
| 99 | +Our _package.json_ contains a _main_ field, which gives us the entry point to our application. But _Parcel_ uses our application as a library and treats that _main_ field as an exit point. When we create the _bundle_, it gives us an error and shows us _Did you mean index.html?_. So the solution is to remove it and save us errors. |
| 100 | + |
| 101 | +```diff |
| 102 | +"browserslist": "> 0.5%, last 2 versions, not dead", |
| 103 | +- "main": "index.js", |
| 104 | + "scripts": { |
| 105 | + "build": "parcel ./src/index.html", |
| 106 | +``` |
| 107 | + |
| 108 | +> [Parcel en producción](https://parceljs.org/features/production/) |
| 109 | +
|
| 110 | +- When we run the compile command. |
| 111 | + |
| 112 | +```bash |
| 113 | +npm run build:prod |
| 114 | +``` |
| 115 | + |
| 116 | +But if we open the generated _javascript_ file we see that our code is in _es6_ and has not been transpiled. |
| 117 | + |
| 118 | +```javascript |
| 119 | +const user="John Doe";console.log(`Hello ${user}!`); |
| 120 | +//# sourceMappingURL=index.6b00e545.js.map |
| 121 | +``` |
| 122 | + |
| 123 | +Why does this happen? We have to tell _Parcel_ to transpile the code for us. And how do we solve it? We go to _package.json_ and add another command line called browserslist. |
| 124 | + |
| 125 | +> [Browserslist documentation for more settings](https://github.com/browserslist/browserslist) |
| 126 | +
|
| 127 | +_[./package.json](./package.json)_ |
| 128 | + |
| 129 | +```diff |
| 130 | +{ |
| 131 | + "name": "parcel", |
| 132 | + "version": "1.0.0", |
| 133 | + "description": "", |
| 134 | ++ "browserslist": "> 0.5%, last 2 versions, not dead", |
| 135 | + "main": "index.js", |
| 136 | + "scripts": { |
| 137 | + "build": "parcel ./src/index.html" |
| 138 | + }, |
| 139 | +``` |
| 140 | + |
| 141 | +- Let's re-generate the _bundle_ and see that our code has now been transpiled. |
| 142 | + |
| 143 | +```bash |
| 144 | +npm run build:prod |
| 145 | +``` |
| 146 | + |
| 147 | +- We get a minified and transpiled version of our code. |
| 148 | + |
| 149 | +```javascript |
| 150 | +var user="John Doe";console.log("Hello ".concat(user,"!")); |
| 151 | +//# sourceMappingURL=index.c90810f0.js.map |
| 152 | +``` |
| 153 | + |
| 154 | +- There's a gotcha old files do not get erased, let's add the **rim-raf** plugin to ensure we are clearing up _[/dist](./dist)_ folder before we generate the bundle. |
| 155 | + |
| 156 | +> [rim-raf documentation](https://www.npmjs.com/package/rimraf) |
| 157 | +
|
| 158 | +```bash |
| 159 | +npm install rimraf --save-dev |
| 160 | +``` |
| 161 | + |
| 162 | +- Let's add an extra step to the build process: |
| 163 | + |
| 164 | +_[package.json](./package.json)_ |
| 165 | + |
| 166 | +```diff |
| 167 | + "scripts": { |
| 168 | +- "build": "parcel ./src/index.html", |
| 169 | ++ "build": "rimraf dist && parcel ./src/index.html", |
| 170 | +- "build:prod": "parcel build ./src/index.html" |
| 171 | ++ "build:prod": "rimraf dist && parcel build ./src/index.html" |
| 172 | + }, |
| 173 | +``` |
| 174 | + |
| 175 | +- We added our **script** to launch our application, **start**, inside [package.json](./package.json): |
| 176 | + |
| 177 | +_[package.json](./package.json)_ |
| 178 | + |
| 179 | +```diff |
| 180 | + "scripts": { |
| 181 | ++ "start": "rimraf dist && parcel ./src/index.html --open", |
| 182 | +- "build": "rimraf dist && parcel ./src/index.html", |
| 183 | ++ "build": "rimraf dist && parcel build ./src/index.html" |
| 184 | +- "build:prod": "rimraf dist && parcel build ./src/index.html" |
| 185 | + }, |
| 186 | +``` |
| 187 | + |
| 188 | +- We can simplify our _scripts_ by adding _source_, where we enter the input to our application. |
| 189 | + |
| 190 | +```diff |
| 191 | +{ |
| 192 | + "name": "parcel", |
| 193 | + "version": "1.0.0", |
| 194 | + "description": "", |
| 195 | + "browserslist": "> 0.5%, last 2 versions, not dead", |
| 196 | ++ "source": "src/index.html", |
| 197 | + "scripts": { |
| 198 | +- "start": "rimraf dist && parcel ./src/index.html --open", |
| 199 | ++ "start": "rimraf dist && parcel --open", |
| 200 | +- "build": "rimraf dist && parcel build ./src/index.html" |
| 201 | ++ "build": "rimraf dist && parcel build" |
| 202 | + }, |
| 203 | +``` |
| 204 | + |
| 205 | +Now we launch the command `npm start` in the console and verify the results. |
0 commit comments