babel 7 从入门到精通

本文以babel 7做为蓝本进行介绍。

它是:

一个由"各种语言->ES5"的转译器

工作模式:

AOT(预先转译)和JIT(即时转译)

工作原理:

借助于presets和plugins的语言转译,由于presets和plugings的无限种可能变化,导致其能力非凡!

借助于CLI的AOT方式:

安装
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
{project}/babel.config.js:
const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];
module.exports = { presets };
将 src 目录下的所有代码编译到 lib 目录:
npx babel src --out-dir lib
或
npx babel src -o lib
配置的不同形式如下(都在项目的根下):
  1. babel.config.js
  2. .babelrc
  3. package.json中的babel属性
  4. .babelrc.js
  5. 使用cli 参数:
    babel --plugins @babel/plugin-transform-arrow-functions script.js

参考文献:
babel中文官网

@babel/preset-env 官网

2016的阮一峰博客

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容