configuración Babel y uso

El primer paso

Babel instalar las herramientas de línea de comandos del paquete de núcleo y

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

El segundo paso

Babel definición de configuración e instalación de plug-ins gramática

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

El tercer paso

Crear y editar archivos en el directorio raíz .babelrc

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

El cuarto paso

Instalación babel-polyfill

npm install @babel/polyfill

El quinto paso

archivo HTML, JS, polyfill introducido ruta modificada

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

paso seis

Implementación de babel compilar la aplicación para confirmar si el funcionamiento normal

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

versión NPM 5,2 o superior, puede ser ./node_modules/.binabreviado comonpx

--out-dir distLos parámetros se pueden compilar la totalidad de srcarchivo en el directorio ya la salida distde directorio