babel configuration and usage

first step

Babel install the core package and command line tools

npm install @babel/core   // babel 核心
npm install @babel/cli   // babel 命令行工具

The second step

Babel preset configuration and installation of plug-ins grammar

npm install @babel/preset-env   // Es6+ 语法
npm install @babel/preset-react   // React 语法
npm install @babel/plugin-proposal-class-properties   // 支持类属性

third step

Create and edit files in the root directory .babelrc

{
    "presets": [
        [
            "@babel/preset-env",
        {
            "useBuiltIns": "entry",
            "corejs": 3
        }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

the fourth step

Installation babel-polyfill

npm install @babel/polyfill

the fifth step

html file, polyfill introduced, modified path js

<script src="./node_modules/@babel/polyfill/browser.js"></script>
<script src="dist/main.js"></script>

Step Six

Implementation of babel compile the application to confirm whether the normal operation

npx babel src --out-dir dist   // 生成 dist 目录，里面有编译后的 js 文件

npm version 5.2 or higher, may be ./node_modules/.binabbreviated asnpx

--out-dir distParameters can compile the entire srcfile in the directory and to the output distdirectory