Cyrille Perois
Lead front-end developer @ Wandi Teaches front-end development @ IUT Paris Descartes
Tooling
Programmation web - Client riche
- Bundler : parcel-bundler
- Compiler : babel
- Linter : eslint
parcel-bundler
app.js
module1.js
module2.js
module2.css
logo.svg
icon.svg
index.html
index.html
main.css
app.js
app.css
icon.svg
logo.svg
=>
npm install --save-dev parcel-bundler
// package.json
{
"scripts": {
"watch": "parcel src/index.html",
"build": "parcel build src/index.html"
}
}npm run watch
npm run build
babel
Le standard ECMAScript évolue au rythme d'une nouvelle version par an depuis 2015. Mais chaque navigateur implémente le standard à son rythme. Tous les navigateurs n'ont donc pas le même niveau d'implémentation de la toute dernière version du standard
Du code écrit en utilisant la toute dernière version du standard ECMAScript
Du code qui fonctionnera dans tous les navigateurs ciblés
npm install --save-dev @babel/core @babel/preset-env
// babel.config.js
module.exports = {
presets: ['@babel/preset-env']
}parcel-bundler détecte automatiquement qu'on souhaite utiliser babel et donc l'utilise pour générer le bundle !
eslint
Quand on fait des erreurs dans notre code, on s'en apperçoit souvent une fois dans le navigateur. Pourtant, beaucoup d'erreurs peuvent être détectées en analysant le code en amont
ESLint permet de définir une liste de problèmes qu'on veut détecter automatiquement dans notre code. Il analyse ensuite notre code à la recherche de ces problèmes, et nous fait un rapport de ce qu'il a trouvé. Il peut même en corriger automatiquement
// .eslintrc.js
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"prefer-const": "off"
}
};
.node_modules/.bin/eslint --init
npm install --save-dev eslint
Des questions ?
Programmation web - client riche - Tooling
By Cyrille Perois
