This is a small guide as a self-reminder :)
Install NodeJs
Explore NPM packages using Babel as an example.
Run the following command in your terminal to install the latest version of the package
npm i -g babel-cli
Install specific version using @ followed by the version number
npm i -g babel-cli@6.26.0
Review installation by running the following command
babel --version
// expected output: 6.24.1 (babel-core 6.26.3)
List all global packages
npm list -g --depth=0
In your terminal run the following command with the -g flag
npm uninstall -g babel-cli
Inside the project folder run the following commands:
cd src
npm init -y
npm i babel-preset-env
- change directory to root folder
- initialize NPM with the -y flag to set defaults params
- install new package for babel
cd into project's folder and run the following command babel [input file] -o [output file] --presets env where input file is the filename e.g. index.js and the desired output filename.
babel input.js -o output.js --presets env
- Input:
src/index.js: es6 syntax file - Output:
public/scripts/bundle.js, generated with babel
babel src/index.js -o public/scripts/bundle.js --presets env
- Edit
package.jsonand add a new script with the command from above
"scripts": {
"build": "babel src/index.js -o public/scripts/bundle.js --presets env"
},Run the following command to transpile the file
npm run build
Watch for changes by adding a new flag at the end of the build script.
"scripts": {
"build": "babel src/index.js -o public/scripts/bundle.js --presets env --watch"
},First we can uninstall the babel-cli with the following command using the -g flag
npm uninstall -g babel-cli
In the project directory we run the following
npm i babel-cli@6.26.0
Our package.json will list our new package
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
}