Babel

babel 是一个转化 js 语法的转译工具
为了浏览器兼容

基本包

// 1.core-内建包(代码引入)
// 2.cli-command包(命令执行)
yarn add -D @babel/core @babel/cli @babel/preset-env
// 3.垫片
yarn add @babel/polyfill

配置 demo

// 建立babel.config.js
touch root/babel.config.js
// 配置
echo "const presets = [
  ["@babel/env", {
    targets: {
      edge: "17",
      firefox: "60",
      chrome: "67"
      safari: "11.1"
    },
    useBuiltIns: "usage"
  }]
];" >> root/babel.config.js
// 转译
./node_modules/.bin/babel src --out-dir lib

插件

// 转译function ()->{} function(){}
yarn add -D @babel/plugin-transform-arrow-functions

配置 babel

多种方式

babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  // 插件集合
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

.babelrc

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

.babelrc.js

const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

cli

babel --plugins @babel/plugin-transform-arrow-functions script.js

api

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-arrow-functions"]
});

Core

所有转换基于本地配置文件

// 引入方式
var babel = require("@babel/core");
import { transform } from "@babel/core"
import * as babel from "@babel/core"
//转译
babel.transform(code, options, function(err, result) {
    if(error) console.error(error);
    else result.code/result.map/result.act
});
// sync
var result = babel.transformSync(code,options);
result.map...result.code...result.act...
// async
babel.transformAsync(code,options,function(err,result){
    if(error) console.error(error);
    else result.code/result.map/result.act
})
// 异步替换文件全部内容
babel.transformFile(filename,options,function(err,result){
    if(error) console.error(error);
    else result.code/result.map/result.act 
})
// 同步替换
var result = babel.transformAsync(filename,options);
var result = babel.transformFileSync(filename,options);

// AST
var result = babel.transformAstSync(ast,options);
babel.transformAstAsync(ast,options,function(err,result){
    if(error) console.error(error);
    else result.code/result.map/result.act
})

Q.E.D.


别云剑本星 智多星本剑