Compiler(编译器)

一、概念

二、babel

• 安装包

  npm install --save-dev @babel/core @babel/cli @babel/preset-env
  npm install --save @babel/polyfill

• 项目根目录创建配置文件 babel.config.json 或 .babelrc.json：以下为示例，可调整为想要支持的浏览器版本

  {
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
      }
    ]
  ]
  }

• 从 src 目录编译到lib：./node_modules/.bin/babel src --out-dir lib

  • npm@5.2.0 后可简化为 npx babel src --out-dir lib

1、babel/core、babel/cli

• babel/core：核心功能包。

• babel/cli：允许从终端使用babel的工具，即命令行转码。 以下为安装命令和基本用法示例

  • 使用—out-dir选项未转换。可用—help查看运行cli工具接受的其余选项。 常用 —plugins和—presets

    npm install --save-dev @babel/core @babel/cli
    ./node_modules/.bin/babel src --out-dir lib

• 转换：使用 plugins。插件是很小的JavaScript程序，用于指示Babel如何进行代码转换

• 预设：使用 preset。预设作为转码规则，是一组预定的插件
  • 官方预设
    • @babel/preset-env：一个智能预设，可使用最新的JavaScript，而无需管理目标环境所需的语法转换
    • @babel/preset-flow
    • @babel/preset-react
    • @babel/preset-typescript
  • 实验预设
    • Stage 0 - 稻草人，一个想法，可能是Babel插件
    • Stage 1 - 提案，值得继续努力
    • Stage 2 - 草案，初始规范
    • Stage 3 - 候选，完整的规范和初始浏览器实施
    • Stage 4 - 已完成，将添加到下一个年度版本中

2、babel/preset-env

根目录创建 babel.config.json 或 .babelrc.json 配置文件，env 预设将仅加载目标浏览器中不提供功能的转换插件：

{
"presets": [
  [
  "@babel/env",
    {
      "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
        }
      }
    ]
  ]
}

3、polyfill

• polyfill模块：用以模拟完整的ES2015 +环境，含以下两种模块。在7.4.0中已弃用，建议直接添加core-js

  • core-js / stable（用于polyfill ECMAScript功能）
  • regenerator-runtime / runtime（需要使用编译的生成器函数）

    npm install core-js@3 --save

    import "core-js/stable";
    import "regenerator-runtime/runtime";

• core-js：js模块化标准库

• regenerator-runtime：Regenerator编译的生成器和异步函数的独立运行时。小程序使用 async/await 需要引入
• 若不需要类似 Array.prototype.includes 实例方法，则可使用 transform runtime 插件而非polyfill 不污染全局

• 使用带有“ useBuiltIns”选项的env预设

  • “usage”：添加每个文件用到的 polyfill 特定导入
  • “entry”：将带单独需求到不同的 core.js 入口点基于不同的环境，通过require或import导入
  • “false”：不自动添加polyfill，也不将导入“ core-js”或“ @ babel / polyfill”转换为单独的polyfill

    {
    "presets": [
    [
     "@babel/env",
     {
       "targets": {
         "edge": "17",
         "firefox": "60",
         "chrome": "67",
         "safari": "11.1",
       },
       "useBuiltIns": "usage",
     }
    ]
    ]
    }

    4、配置

• babel.config.json ：编译 node_modules，配置项目整体

• .babelrc.json：仅配置项目单个部分
• .babelrc.js：同 .babelrc.json，但你可以使用 JavaScript 编写

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