ES6 transcoding ES5 environment configuration

configuration file.babelrc

1. The configuration file of Babel is .babelrcstored in the root directory of the project. The first step in using Babel is to configure this file. The configuration file is as follows:

{
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
}

2. Install transcoding rules

npm install --save-dev babel-preset-stage-2

Command line transcoding babel-cli

1. In order to make the project independent of the environment, install it into the project, the command is as follows:

npm install --save-dev babel-cli

2. Modify the package.json file as follows

{ 
  "devDependencies": {
    "babel-cli": "^6.10.3",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "3.10.0"
  },
  "scripts": {
    "build": "babel ESAPP -d test"
  }
}

Run for transcoding - manual transcoding

npm run build

Test whether the ES6 code written is correct

babel-cliThe tool comes with a babel-nodecommand that provides a REPL environment that supports ES6. It supports all the features of Node's REPL environment, and can run ES6 code directly.

It is not installed separately but along with it babel-cli. Execution then babel-nodeenters the REPL environment.

babel-register

babel-registerThe module overrides requirethe command, adding a hook to it. From then on, whenever a file with requireload .js, .jsx, .esand .es6extensions is used, it will be transcoded with Babel first.

$ npm install --save-dev babel-register

When used, it must be loaded first babel-register.

require("babel-register");
require("./index.js");

Then, there is no need to manually transcode index.js.

It should be noted that babel-registeronly requirethe file loaded by the command will be transcoded, not the current file. In addition, since it is transcoding in real time, it is only suitable for use in the development environment.