(as of oct 2017) => somewhat deprecated
On utilise npm
npm init to create a package.json
{
"name": "your-project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
npm install nameOfPackage to store the package into the node_modules folder
Exemple avec moment.js (pour gérer les dates) npm install moment (–save1))
Cette commande fait deux choses :
first, it downloads all the code from the moment.js package into a folder called node_modules.
Second, it automatically modifies the package.json file to keep track of moment.js as a project dependency.
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"moment": "^2.22.2"
}
}
This is useful later when sharing a project with others — instead of sharing the node_modules folder (which can get very large), you only need to share the package.json file and other developers can install the required packages automatically with the command npm install.
On utilise webpack (maj. 2018 voir webpack-cli)
webpack est un JavaScript module bundler (comme browserify) qui compile tout les fichiers javascript du projet en un seul fichier.
webpack (voir options) permet également de generating source maps to help debug the original code from the transpiled code
$ npm install webpack webpack-cli --save-dev
–save-dev => this saves it as a development dependency, which means it’s a package that you need in your development environment but not on your production server.
Le package.json a été modifié
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"moment": "^2.19.1"
},
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
On peut lancer webpack avec $ ./node_modules/.bin/webpack index.js --mode=development
The –mode=development argument is to keep the JavaScript readable for developers, as opposed to a minified output with the argument –mode=production.
Webpack compile le tout dans dist/main.js
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
<script src="dist/main.js"></script>
</head>
Webpack can read options from a config file in the root directory of the project named webpack.config.js
// webpack.config.js
module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'main.js',
publicPath: 'dist'
}
};
Plus besoin de préciser le fichier cible ni le mode, il suffit de lancer $ ./node_modules/.bin/webpack
On utilise babel
Transpiling code means converting the code in one language to code in another similar language.
Exemple de transpillers :
On installe babel npm install @babel/core @babel/preset-env babel-loader --save-dev
Configurer webpack pour utiliser babel-loader → éditer webpack.config.js
// webpack.config.js
module.exports = {
mode: 'development',
entry: './index.js',
output: {
filename: 'main.js',
publicPath: 'dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
Explications
Pour trouver le code transpilé, on peut effectuer une recherche dans bundle.js
Pour automatiser les tâches (ex. grunt & gulp).
Tasks include:
Editer package.json et ajouter
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress --mode=production",
"watch": "webpack --progress --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"moment": "^2.22.2"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
Pour run le build script, il suffit de $ npm run build
This will run webpack (using configuration from the webpack.config.js we made earlier) with the
To run the watch script $ npm run watch
Lance un watcher pour lancer webpack à chaque modification du fichier index.js
A separate tool which provides a simple web server with live reloading.
To install it as a development dependency, enter the command $ npm install webpack-dev-server --save-dev
Add to package.json
{
"name": "modern-javascript-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --progress -p",
"watch": "webpack --progress --watch",
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"dependencies": {
"moment": "^2.19.1"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^3.7.1",
"webpack-dev-server": "^3.1.6"
}
}
Démarrer le server avec $ npm run server et ouvrir index.html à l’adresse localhost:8080