babel使用心得

本文主要研究babel插件transform-react-jsx的使用

开始

为了便于说明，首先我们来定义两个概念。

1. 转译插件，转译插件是用来转译单一功能的插件，比如transform-es2015-arrow-functions，这个插件只负责转译es2015新增的箭头函数。
2. 转译器，转译器是一系列转译插件的集合。比如babel-preset-es2015就包含了es2015新增语法的所有转译插件，比如包含transform-es2015-arrow-functions（es2015箭头函数转译插件）、transform-es2015-classes(es2015 class类转译插件)等。

大体上babel的转译器分为3类：

1. 语法转译器，这些转译器只负责转译js最新的语法，并不负责转译js新增的api和全局对象。这类转译器包括babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等，以后肯定还会有新的转译器加入，不过你只要理解转译器就是一堆转译插件的集合就可以了。
2. 补丁转译器，这些转译器只负责转译js最新的api和全局对象。比如浏览器不支持String新增的String.padStart方法和Promise全局对象。通过babel-profill转译，我们可以通过其他代码来让浏览器实现类似String.padStart和Promise的功能。
3. jsx和flow插件，这类转译器用来转译JSX语法和移除类型声明的，使用Rect的时候你将用到它，转译器名称为babel-preset-react

另外你可以对babel已有的转译器进行改造或者创建新的转译器。
如何创建babel转译器可以点这里

插一下题外话关于babel-preset-react

下载github里的babel项目，里面的packages目录下包含了很多的babel转移器和插件

一、babel/packages里面包括了转译插件transform-react-jsx

在目录babel-plugin-transform-react-jsx下

其中package.json

"name": "@babel/plugin-transform-react-jsx"

所以引用或者安装这个转译插件，可以通过

npm install --save-dev @babel/plugin-transform-react-jsx

参考github

安装后显示的package.json

"devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.0.0"
}

但是npm里的安装是通过

npm install --save-dev babel-plugin-transform-react-jsx

安装后显示的package.json

"devDependencies": {
    "babel-plugin-transform-react-jsx": "^6.24.1"
}

对比了一下，两者代码虽然不一致，实现的功能是一致的

唯一的区别就是
npm安装的可以单独作为插件使用，而github安装的则不行，主要因为版本的问题，因为@babel/plugin-transform-react-jsx@7.0.0需要babel-core@7.0.0支持，而目前项目里是babel-core@6.26.3

{
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

{
  "plugins":["transform-react-jsx"]
}

经过实测发现以下这种形式会报错

{
  "plugins":["transform-react-jsx", {
    "pragma": "dom"
  }]
}

二、babel/packages里面还包括了转译器babel-preset-react

在目录babel-preset-react下

打开目录中./src/index.js

import { declare } from "@babel/helper-plugin-utils";
import transformReactJSX from "@babel/plugin-transform-react-jsx";
import transformReactDisplayName from "@babel/plugin-transform-react-display-name";
import transformReactJSXSource from "@babel/plugin-transform-react-jsx-source";
import transformReactJSXSelf from "@babel/plugin-transform-react-jsx-self";

可以看到引用了一些转译插件，其中就包括了转译插件transform-react-jsx

本地安装babel命令行工具

babel命令行工具可以全局安装也可以本地安装，官方文档推荐本地安装，原因有2点；

1. 本地安装不同的项目可以使用不同版本的babel，你也可以单独对某个项目的babel进行升级等操作

2. 每个项目单独安装的意味着对计算机环境没有依赖，便于移植

npm install --save-dev babel-cli

在命令行中调用babel

修改package.json

"scripts": {
    "build": "babel src -d lib"
  },

这里需要解释babel src -d lib这个命令的意思。这个命令目的是把src文件夹下的文件都转译，转译后的文件放到lib目录下。

配置.babelrc文件

.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件，presets用于配置我们所需要的转译器。

.babelrc不是必须的，我们在.babelrc中配置的选项都可以通过命令行添加，比如在命令行执行babel src -d lib –presets=env等价于在.babelrc中配置”presets”:[“env”]。当然.babelrc要明显方便很多。

babel在转译代码的过程中会自动读取当前目录.babelrc配置文件，如果当前目录没有的话就遍历整个目录树去寻找，直到找到.babelrc文件或者含有”babel”字段的package.json文件，然后使用这些配置选项来转译代码。

{
    "presets":["env"]
}

总结

转译器就是一堆转译插件的集合。babel转译器很多，但是我们常用的就那几个。如果要转译新版本的js的话，只需要使用babel-presets-env这一个转译器就可以了。

在webpack中使用babel

安装webpack

npm install --save-dev webpack webpack-cli

安装babel-plugin-transform-react-jsx和babel-loader

npm install --save-dev babel-preset-env babel-loader@7.1.2

这里需要指定下babel-loader版本，因为版本太高会报错

此时的package.json如下

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "webpack": "^3.2.0",
    "webpack-cli": "^3.1.2"
},

在根目录下创建webpack.config.js文件

var path = require("path");
module.exports = {
  entry: './src/vd.js',
  output: {
    path: path.resolve(__dirname,"lib"),
    filename: 'vd.compiled.js',
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
      // query:{
      //   plugins: ["transform-react-jsx"]
      //   presets:["env"] // 需要先npm install --save-dev babel-preset-env
      // }
    }]
  }
}

entry为入口文件，我们选择当前目录下，src文件夹下的person.js文件作为入口。output为输出选项，path为输出的目录，filename为输出文件名。query选项为.babelrc中的配置选项。在webpack中设置了query字段后，就不再需要.babelrc文件了。

运行webpack

在命令行中执行webpack，webpack会自动读取webpack.config.js文件中的配置。然后对我们配置的文件进行转译。

webpack

总结

• babel常用的转译器是babel-preset-env。

• 常用的配置选项是plugins和presets

• 常用的使用场景是在webpack中

参考资料

babel从入门到入门
你不知道的Virtual DOM（一）：Virtual Dom介绍
npm - babel-plugin-transform-react-jsx
github - @babel/plugin-transform-react-jsx