前端: JavaScript: Babel简介

[xvno]

Babel 简介

• core
• cli
• plugin
• preset
• polifill

[xvno]

core

@babel/core, 见名知意, babel 的核心模块, 安装 babel 必备.

[xvno]

cli

@babel/cli, 又一次见名知意 babel 的 CLI 工具.

[xvno]

plugin

针对 JavaScript ES6 特性的插件, 用来翻译成对应的 ES5 (或其他环境下的代码)

/* 源码 */
const yell = (msg) => 'msg: ' + msg;
/* babel + plugin-transform-arrow-functions */
// npx babel src/js -d lib/js --plugin=@babel/plugin-transform-arrow-functions
const yell = function(msg) {
  return 'msg: ' + msg;
}

[xvno]

preset

这是插件功能的集合, 比如针对 ES5 的所有 ES6 插件的集合 env

nid @babel/preset-env
nid @babel/preset-stage-0
nid @babel/preset-react
nid @babel/preset-typescript

npx babel src/js -d lib/js --preset=@babel/preset-react

[xvno]

配置文件 babelrc.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "10",
        chrome: "70",
        firefox: "60",
        safari: "11.1"
      }
    }
  ] 
]

module.exports = { presets };

[xvno]

polyfill

用来模拟 ES6+ 环境

• 类方法: Array.from, Object.assign, Object.Values
• 原型方法: Array.prototype.includes
• Promise, WeakMap, generator 函数 ...

@babel/polyfill

[xvno]

@babel/node

babel-node 命令, 会提供一个支持 ES6 的 REPL 环境, 鸡肋了点: 早期版本的 node 会用得到, node v12 以上已经支持ES6