babe基础知识

Babel的介绍

Babel是一个javaScript编译器，主要用于将ECMAScript2015+语法编写的代码转换为向后兼容的Javascript的代码,以便能够运行在当前和旧版本的浏览器或其他环境中。 Babel的主要功能：

• 语法转换
• 通过polyfill的方法补充目标环境缺失的功能。(通过引入三方的polyfill模块，比如core-js)。
• 源码转换

Babel还支持：

• jsx语法转换
• typescrip、flow语法转换
• sourceMap
• 自定义插件(通过自定义插件可以对源码进行修改)

babel本身不会进行类型检查，需要配合typescript、flow等工具一起使用，babel的用途是将ts、flow转换为js代码

一、babel的安装和使用

yarn add @babel/core @babel/cli @babel/preset-env

@babel/core：babel的核心模块，负责代码的转换和生成。 @babel/cli：babel的命令和工具 @babel/preset-env：babel的转换规则的预设。

根目录下新建babel.config.json配置文件

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

执行下面的命令将src目录下的代码编译到lib目录：

./node_modules/.bin/babel src --out-dir lib

还可以直接在代码中引入babel提供的api进行代码的转换：

const babel = require('@babel/core');
let code = `const a = 1;`
const result = babel.transformSync(code,{});
console.log(result.code);

@babel/cli提供了命令行工具, 可以直接在命令行中使用。

// 编译src目录下的代码到lib目录
./node_modules/.bin/babel src --out-dir lib
./node_modules/.bin/babel src --out-dir  lib --watch // 监听src目录下的文件变化，自动编译

二、插件和预设

2.1插件

在babel中代码的转换是通过插件和预设来实现的。babel官方也提供了很多的插件，例如@babel/plugin-transform-arrow-functions用于将箭头函数转为普通函数。

yarn add @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

除此之外还可以自定义插件，使用自定义插件可以对源码进行修改。

// 一个插件就是一个函数
export default function({ types: t }) {
  return {
    visitor: {
      Identifier(path) {
        if (path.node.kind === "let") { //let转成var
          path.node.kind = "var";
        }
      },
    },
  };
}

2.2预设

预设就是一组插件的集合，制定了插件的转换规则。除此之外，还可以根据自己需要的插件组合成一个预设并将其分享出去。下面的@babel/preset-env是babel官方提供的预设。

./node_moduels/.bin.babel src --out-dir lib --presets=@babel/preset-env

三、babel的配置

babel有多种配置方式：

• babel.config.*
• .babelrc.*
• .babelrc
• package.json

最新版本中官方推荐使用babel.config.json作为配置文件

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

还有一种比较实用的配置方式是使用js作为配置文件，可以根据环境变量等去动态的加载不同的插件和预设。

// babel.confog.js
module.exports = function(options){
  let presets =  options.presets;
  let plugins = options.plugins;
  if(process.env.NODE_ENV === 'development'){
    presets.push('@babel/preset-env');
    plugins.push('@babel/plugin-transform-react-jsx');
  }
  return {presets, plugins};
}

在packgage.json中配置

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

在命令行中配置

./node_modules/.bin/babel src --out-dir lib --config-file=babel.config.js

手动调用babel.transform()方法的时候进行配置

const babel = require('@babel/core');
let code = `const a = 1;`
babel.transform(code,{
  ast: false,
  map: false,
  inputSourceMap: false,
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-arrow-functions']
});

这些配置可以同时存在，当它们同时出现的时候，babel会将重复的配置进行覆盖和合并，它们的优先级是： babel.config.json< .babelrc.json < cli中的配置