预设

ES6 to ES5

这个前面已经说过了, 安装 @babel/preset-env 即可, 不赘述

参数:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      }
    }]
  ]
}
  • targets.esmodules 是否支持ES Modules
  • targets.node 指定 node的版本, 可选值如 process.versions.nodetrue"current" 或 指定版本号
  • targets.safari 支持的safari
  • targets.browsers 支持的浏览器, 类型为 string | Array<string>, 参看 browserslist
  • loose 默认false
  • modules "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" (默认) | false

转换 JSX

需要安装 @babel/preset-react:

yarn add @babel/preset-react

配置 .babelrc

{
  "presets": ["@babel/preset-react"]
}

测试, 创建 src/test.jsx:

export default React.createClass({
  getInitialState() {
    return {
      num: this.getRandomNumber()
    };
  },
  getRandomNumber() {
    return Math.ceil(Math.random() * 6);
  },
  render() {
    return <div>Your dice roll: {this.state.num} </div>;
  }
});

执行 yarn build, 生成 lib/test.js:

export default React.createClass({
  displayName: "test",
  getInitialState() {
    return {
      num: this.getRandomNumber()
    };
  },
  getRandomNumber() {
    return Math.ceil(Math.random() * 6);
  },
  render() {
    return React.createElement(
      "div",
      null,
      "Your dice roll: ",
      this.state.num,
      " "
    );
  }
});

还可以指定多个 presets:

{
  "presets": ["@babel/preset-react", "@babel/preset-env"]
}

这样转换出来的文件内容为:

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _default = React.createClass({
  displayName: "test",
  getInitialState: function getInitialState() {
    return {
      num: this.getRandomNumber()
    };
  },
  getRandomNumber: function getRandomNumber() {
    return Math.ceil(Math.random() * 6);
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      "Your dice roll: ",
      this.state.num,
      " "
    );
  }
});
exports["default"] = _default;

转换 flow

需要安装 @babel/preset-flow:

yarn add @babel/preset-flow

配置 .babelrc

{
  "presets": ["@babel/preset-flow"]
}

测试, 创建 src/test.js:

// @flow
function square(n: number): number {
  return n * n;
}

转化为:

"use strict";
function square(n) {
  return n * n;
}

转换 TypeScript

需要安装 @babel/preset-typescript:

yarn add @babel/preset-typescript

创建测试文件test.ts:

function Greeter(greeting: string) {
  this.greeting = greeting;
}

执行 npx babel --presets @babel/preset-typescript test.ts, 输出:

function Greeter(greeting) {
  this.greeting = greeting;
}

minify

使用 minify 可以将输出的代码进行压缩

安装:

yarn add babel-preset-minify

配置, babel.config.js:

module.exports = {
  "presets": [
    "minify"
  ]
}

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress