Babel JavaScript 编译基础配置

Babel

Babel is a JavaScript Compiler。输入下一代的 JavaScript 语法，输出兼容浏览器的 JavaScript 代码。

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或者其它环境中。下面列出的是 Babel 能为我们做的：

• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性（通过@babel/polyfill 模块）
• 源码转换（codemods）

Babel 原理

Babel 大概分成三部分：

• 解析：将代码（字符串）转换成 AST（抽象语法树）
• 转换：访问 AST 的节点进行变换操作生成新的 AST
• 生成：以新的 AST 为基础生成兼容浏览器环境的代码

babel.config.js or .babelrc

和 ESLint（.eslintrc）、Prettier（.prettierrc）一样，Babel 也是由配置文件。Babel7 正式引入了 babel.config.js 文件配置，第一点相比是格式稍有不同。如果你希望以编程的方式创建配置文件，或者希望编译 node_modules 目录下的模块，那么 babel.config.js 文件能满足你的需求！

module.exports = function (api) {
  api.cache(true);
  const presets = [ ... ];
  const plugins = [ ... ];
  return {
    presets,
    plugins
  };
}

如果你只需要一个简单的并且只用于单个软件包的配置，.babelrc 则合适你。

{
  "presets": [...],
  "plugins": [...]
}

使用指南 工具链包

将ES6代码编译成兼容低版本浏览器代码的指南。

devDependencies:
**
功能：@babel/core 核心库，包含Babel的核心功能
“@babel/core”: “^7.7.0”,
npm install —save-dev @babel/core

功能：@babel/cli 能够从命令行使用的工具，我们可以将我们所需要的代码转换功能作为参数传递进去
“@babel/cli”: “^7.7.0”,
npm install —save-dev @babel/cli

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
or
npx babel src --out-dir lib --presets=@babel/env

功能：@babel/preset-env 可让您使用最新的JavaScript，而无需管理目标环境所需的语法转换（以及可选的浏览器polyfill
“@babel/preset-env”: “^7.5.5”, npm install —save-dev @babel/preset-env

功能：webpack 桥接器
“babel-loader”: “8.0.5”,

Dependencies:
“@babel/runtime”: “^7.5.5”,

功能：@babel/polyfill 由于 Babel 假定你的代码将在 ES5 环境中执行，因此使用的都是 ES5 函数。如果你所使用的运行环境 对 ES5 的支持有限或不支持，例如低版本的 IE，那么就需要使用 @babel/polyfill 来满足需求。
“@babel/polyfill”: “^7.4.4”, npm install —save @babel/polyfill

// 可以在入口文件首行直接引入
import "@babel/polyfill";

配置例子

{
  [
    // 对js文件进行babel-loader处理（使支持ES6语法）
    {
      // 需要转换文件
      test: /\.js$/,
      // 不包含文件
      exclude: /node_modules/,
      options: {
        presets: [
          [
            // 将 ES6 语法转成 ES5
            '@babel/preset-env',
            {
              targets: {
                edge: '17',
                firefox: '60',
                safari: '11.1',
                chrome: '58',
                ie: '11'
              },
              // 低版本浏览器中只补充项目中使用到的ES6语法
              useBuiltIns: 'usage'
            }
          ]
        ]
      }
    }
  ]
}