Babel local editing environment setup

Today we are talking about Babel building local environment. As you know, javascript has been released in ES7 version, but most of the current environment only supports ES5, even nodeJS does not fully support ES6, ES7. Babel today converts our ES6, ES7 code into ES5 so that our existing environment can run js properly.

1. Babel installation

Babel is installed via NPM, which is a module on Node, so the environment requires node.js to be installed first, then NPM to be installed, and then Babel – CLI. Node.js can be downloaded from nodejs.org/dist/. Select the corresponding… [image upload failed…(image-c2bFA1-1535292856666)]

Node and NPM:

[image upload failed…(image-58c656-1535292856666)]

Babel – CLI installation, domestic environment recommended to NPM source cache Taobao’s re-installation.

npm config set registry https://registry.npm.taobao.org/
npm config get registry
Copy the code

NPM install Babel -cli -g to install Babel -cli globally.

npm install babel-cli -g
babel -V
Copy the code

[image upload failed…(image-c85658-1535292856666)]

2. Use

We first find a directory and then use NPM to initialize a project to build our Babel environment.

[image upload failed…(image-f2D896-1535292856666)]

Let’s go to the Babel directory, open the command line tool and type some commands to verify our environment.

babel-node
(a => a + 1)(2)
3
Copy the code

[image upload failed…(image-a49cef-1535292856666)]

As you can see, we have successfully executed an ES6 arrow function above. Babel-node is a compilation tool provided by Babel, which can use the command line to execute our JS code. Here we use babel-node to execute a JS file. Go to the project directory Babel and create index.js, and type the following code.

let a = [1.2.3];
a.map((row) = > {
	console.log(row)
})
Copy the code

Then enter the following command on the command line. [image upload failed…(image-425C5B-1535292856666)] As you can see, babel-Node is running our ES6 code. Here are some configurations to improve our Babel environment.

3 the configuration

In the Babel directory, create. Babelrc, Windows can be created with the following command.

echo. > .babelrc
Copy the code

Open with Notepad and enter the following

{" presets ": [" es2015", "stage - 2"], / / set the transcoding rules "plugins" : "the transform - runtime"] / / set the plug-in}Copy the code

Here we have configured the transcoding rules of Babel, transcoding to ES2015. The following rule sets are provided officially, which can be installed as required:

# ES2015 Transcoding rule
npm install --save-dev babel-preset-es2015

React transcode rule
npm install --save-dev babel-preset-react

# ES7 transcoding rules for different stages of syntax proposal (there are 4 stages in total), an optional one
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3
Copy the code

Here we just need to convert to ES2015 and here we install the parts we need: NPM install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 –save-dev, preset is recommended. You can modify the. Babelrc file and install the plugins above. Let’s open the package.json file under our Babel project and make the following changes.

{
  "name": "babel"."version": "1.0.0"."description": "a babel project"."main": "index.js"."scripts": {
    "build": "babel src -w -d lib"// Compile the entire SRC directory and print it to the lib directory. SRC refers to the directory to be converted, lib refers to the directory where the output is stored, and -w stands for -watch, listening for files and compiling output in real time."keywords": [
    "babel"]."devDependencies": {
    "babel-core": "^ 6.26.3"."babel-plugin-transform-runtime": "^ 6.23.0"."babel-preset-es2015": "^ 6.24.1"."babel-preset-stage-2": "^ 6.24.1"
  }
  "author": "zhujie"."license": "ISC"
}
Copy the code

Now we will create SRC and lib directories under Babel project directory. Remember to create them, otherwise we will get an error. Then we will start our Babel project. Enter NPM run build. This launches our Babel real-time compilation feature. Create main.js in the SRC directory and type

// load images asynchronously
let d;
function loadImageAsync(url){
    return new Promise((resolve,reject) = > {
        const image = new Image();
        image.onload = function(){
            resolve(image);
        };
        image.onerror = function(){
            reject(new Error('error'));
        }
        image.src = url;
    });
}
Copy the code

Then we open mina.js in the lib directory and see that the code has been converted.

'use strict';

var _promise = require('babel-runtime/core-js/promise');

var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// load images asynchronously
var d = void 0;
function loadImageAsync(url) {
    return new _promise2.default(function (resolve, reject) {
        var image = new Image();
        image.onload = function () {
            resolve(image);
        };
        image.onerror = function () {
            reject(new Error('error'));
        };
        image.src = url;
    });
}
Copy the code

And you’re done!

conclusion

Babel can convert ES6 and ES7 grammars to es6 and ES7 grammars, which is suitable for most environments. It is sufficient for those who want to use ES6 and ES7 grammars without too much redundancy. However, Babel also has many functions. Babel-register,babel-core,babel-polyfill and other tools. There is no detailed explanation here. If you have any questions, please email me at [email protected]

Finally, I can scan the TWO-DIMENSIONAL code in the picture to pay attention to my personal public account and release various related technologies every day. [Image upload failed…(image-406FFB-1535292856666)]