前言
突然觉得 babel-loader https://github.com/babel/babel-loader 很好玩，比较贴近AST，然而编译原理一直是噩梦，没学懂，好在这东西不需要什么编译原理的知识。但还是涉及到语法解析等操作，所以拿过来学一学还是挺好的。
什么是 Babel
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中的向后兼容版本的 JavaScript。 以下是 Babel 可以为您做的主要事情：
- 转换语法
- 目标环境中缺少Polyfill功能（通过@ babel / polyfill）源代码转换（codemods）
- 更多
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});
代码转化就涉及到了语法解析，这便是我们的重点
自定义
首先新建一个项目 webpack 项目 babel-demo
目录结构如下
.
├── README.md
├── babel-plugin-transform-class
│ └── index.js
├── dist
│ └── bundle.js
├── package-lock.json
├── package.json
├── src
│ └── index.js
└── webpack.config.js
新建 package.json 并使用 npm install 安装所需插件
npm install -D babel-loader @babel/core @babel/preset-env webpack
package.json
{
"scripts": {
"start": "webpack"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"webpack": "^4.39.1"
}
}
新建 webpack 文件
var path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
plugins: [
"transform-class"
]
}
}
]
}
}
module 里面的 rule 便是配置我们自定义的 babel 插件，transform-class 是插件名。
手写插件
下面是一个简单的插件
babel-plugin-transform-class/index.js
// A plugin is just a function
module.exports = function ({ types: t }) {
return {
visitor: {
Identifier(path) {
let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ
path.node.name = name.split('').reverse().join('');
}
}
};
}
将 babel-plugin-transform-class 文件夹移动到 node-modules 目录下即可。当运行 webpack 的时候，便会运行这个插件，这个插件会把 node 的 name 做反转。
我们的 demo
function babel() {
let javascript = 'hello babel';
console.log(javascript);
}
打包后
eval("function lebab() {\n let tpircsavaj = 'hello babel';\n elosnoc.gol(tpircsavaj);\n}\n\n//# sourceURL=webpack:///./src/index.js?");
我们看到变量名都反转了。
我们还可以实现更多·····更多属性，方法在这里 https://babeljs.io/docs/en/next/babel-types.html
