babel 转码示例探究

目前的前端开发中，基本都要使用babel 来进行对应的代码处理，例如es2015 规范的代码转码为浏览器支持的es5。

那么babel 是如何做的处理的？

babel 插件
阮一峰 es6

这里是一小段代码，可以根据不同的babel 插件进行测试，对balel 的transform 来一探究竟。

打开终端，执行如下命令：

>> mkdir babel-test && cd $_
>> npm init -y

安装babel 相关包：

>> npm install @babel/core @babel/cli --save-dev

编写cli.js ，代码如下：

const fs = require('fs');
const path = require('path');

const code = fs.readFileSync(path.resolve(__dirname, 'src/index.js'));

const res = require("@babel/core").transform(code, {
    plugins: [
        "@babel/plugin-transform-for-of"
    ]
});

fs.writeFileSync(path.resolve(__dirname, 'lib/index.js'), res.code);

上述代码，我们是以@babel/plugin-transform-for-of 插件举例，因此需要安装

>> npm install @babel/plugin-transform-for-of --save-dev

在src/index.js 编写转换前代码，对应目录为，然后执行node cli.js ，编译后的代码见lib/index.js.

目录结构

babel-test
|--src
        |--index.js
|--cli.js
|--package.json

通过如上方式，可以方便的看babel 对一些语法的转换后代码，方便理解其实现原理。

babel 插件
阮一峰 es6

至此，结束。