babel 的配置和使用

第一步

安装 babel 核心包和命令行工具

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

第二步

安装 babel 的预置配置和语法插件

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

第三步

在根目录下创建并且编辑 .babelrc 文件

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

第四步

安装 babel-polyfill

npm install @babel/polyfill

第五步

html 文件中，引入 polyfill，修改 js 路径

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

第六步

执行 babel 编译，确认应用是否能正常运行

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

npm 版本 5.2 以上，可以将./node_modules/.bin缩写为npx

--out-dir dist参数可编译整个src目录下的文件并输出到dist目录中