🔨 How to configurate Parcel. Tutoriel Parcel : Parcel, Module bundler from grafikart.fr.
Parcel.js is a bundler just like rollup, webpack, browserify but its zero-config/no-config and supports bundling the whole web app not just javascript files. Although few bundlers are only Javascript centered. Bundlers like Webpack, Parcel.js are web app bundlers which includes Javascript, it's variants and the whole ecosystem, Images, Stylesheets, Template engines.
Table of contents generated with markdown-toc
-
Assets: Out of the box support for JS, CSS, HTML, file assets. Parcel Detect all the dependecies declare them and build a tree with dependencies
-
Transformers: Babel, PostCss... to transform the code.
-
Packagers: manage behaviours at the end of the chain.
npm init
npm i -D parcel-bundler
To launch local server:
parcel serve index.html
It will create .dist and .cache directories.
Launch: http://localhost:1234
To build optimized files (css and js minified):
parcel build index.html
If we add a scss file, Parcel will automatically download node-sass.
Warning: we need to use quotes for url:
body {
background: $backgroundColor url("./parcel-js-bkgr.jpg");
}It's not even necessary to install less, parcel will automatically install less if it detects a less file.
You can import LESS files from JavaScript or html files.
import './custom.less'
or
<link href="./custom.less" rel="stylesheet">
Create .postcssrcrc at the root with:
{
"modules": false,
"plugins": {
"autoprefixer": {
"grid": true
},
"css-mqpacker": {
"sort": true
}
}
}Delete .cache before relaunch dev server
Parcel will add autoprefixer and css-mqpacker and autoprefix and group media queries automatically.
/*autoprefix*/
@-webkit-keyframes demo {
from {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
to {
transform: scale(0.9);
}
}
@keyframes demo {
from {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
to {
transform: scale(0.9);
}
}
/*group media queries that are in 2 different scss files*/
@media screen and (min-width: 756px) {
.foo {
background-color: #FF0000;
}
.bar {
background-color: #3cff26;
}
}npm install --save-dev @babel/core @babel/cli
npm install @babel/preset-env --save-dev
Create .babelrc at the root with:
{
"presets": ["@babel/preset-env"]
}
Delete .cache before relaunch dev server.
Babel will convert code, for instance const to var.
Our three tools all have similar objectives:
make code more consistent in itself and across team members detect problematic code patterns that could lead to potential bugs ESLint is by far the most popular JavaScript linter. It statically analyzes your code to help you detect formatting issues and find code inconsistencies.
Prettier, while similar to ESLint by formatting your code, does not check your code quality. It just serves as a code formatter. It does this job pretty well though by natively supporting JavaScript but also JSX, Flow, TypeScript, HTML, JSON, CSS and many more languages.
EditorConfig, on the other hand, does not lint or format your code. It merely defines a standard code formatting style guide among all the IDEs and editors used within a team of developers. For instance, if a team uses two main editors such as Sublime Text and Visual Studio Code, EditorConfig allows them to define a common indentation pattern (spaces or tabs) within a single file.
Download the ESLint and Prettier extensions for VSCode.
Install Eslint and Prettier libraries:
npm install eslint prettier --save-dev
Install Airbnb config:
npx install-peerdeps --dev eslint-config-airbnb
Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type):
npm install -D eslint-config-prettier eslint-plugin-prettier
In .eslintrc (root):
{
"extends": ["airbnb", "prettier"],
"env": {
"es6": true,
"browser": true,
"node": true
},
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"],
"no-console": "off"
}
}on .prettierrc (root):
{
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}In VSCode:
Open the User Settings, usinge the shortcut Ctrl + Shift + P then search for: “Preferences: Open Settings (JSON)”, then add:
"[javascript]": {
"editor.formatOnSave": true
}In .editorconfig (root):
[*]
end_of_line = lf
charset = utf-8
indent_style = spaceIf we use Tyscript instead of Javascript, Parcel will convert automatically.
However, It won't be able to do type checking and won't display any error.
All the plugins begins by 'parcel-plugin'.
For instance let's add, parcel-plugin-bundle-manifest:
npm install --save-dev parcel-plugin-bundle-manifest
It will create 'manifest.json'.
It will generate the structure you specify in the configuration object while also handle all your imports (css, images, js...) which makes it suitable for all use cases, from simple websites all the way to complex React/Angular/Vue projects.
parcel-plugin-custom-dist-structure
npm i parcel-plugin-custom-dist-structure --save-dev
Example configuration object in package.json:
"customDistStructure": {
"config": {
// Output JS files to dist/js folder
".js": "js",
// Output JPG and PNG files to dist/images folder
"images": [
".jpg",
".png"
],
// General idea
".fileExtension": "folder/in/dist",
"folder/in/dist": [ ".file", ".extensions" ]
},
"options": {
// Enable plugin in development mode (default: false)
"development": true
}
}- Parcel documentation
- parcel-bundler/parcel
- Using Babel
- PostCSS
- What is Parcel.js and how it's faster than webpack?
- Why You Should Use ESLint, Prettier & EditorConfig
- Integrating Prettier + ESLint + Airbnb Style Guide in VSCode
- Integrating Prettier + ESLint + Airbnb Style Guide + EditorConfig no VSCode
- reactivestack/parcel-react-ssr