Skip to content

Commit af88ebc

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #103 from manudous/feature/#94-migrate-parcel-2
Feature/#94 migrate parcel 2
2 parents 2c5a3fd + 18cdacd commit af88ebc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+2067
-4
lines changed

‎03-bundling/.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
node_modules
22
dist
33
package-lock.json
4-
.cache
4+
.parcel-cache

‎03-bundling/02-parcel/06-images/src/content/logo_1.png

100755100644
File mode changed.

‎03-bundling/02-parcel/07-typescript/src/content/logo_1.png

100755100644
File mode changed.

‎03-bundling/02-parcel/08-react/src/content/logo_1.png

100755100644
File mode changed.

‎03-bundling/02-parcel/09-css-modules/src/content/logo_1.png

100755100644
File mode changed.

‎03-bundling/05-parcel2/01-basic/README.md

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
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

Comments
 (0)