babel介绍
Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。
babel 的工作过程
如图所示：
因此，可以利用修改AST 来操作我们写的业务代码，比如清除代码里的console.log。这样可以简化写代码的过程， 许多重复性，可以在解析阶段完成的任务就可以放到babel中来执行。
插件编写步骤
插件示例： 在指定文件中通过多个import()来读取对应多个配置以进行下一步操作
- 指定文件中 special.js
export const specialIndex = () => {
const importArr = [];
console.log('importArr', importArr) // 将import()通过babel插件push到这个数组中
}
- 创建插件文件 scripts/plugins/generator-code.js
module.exports = function(babel) {
const {types} = babel;
const getArrayDeclarationBody = (path) => {
return path.declaration.declarations[0].init
}
return {
visitor: {
ExportDeclaration(path) {
// 当遍历到export声明 时
if (this.filename.includes('special')) {
const [arrayDeclaration] = getDeclarationBody(path).body.body
const dynamicImport = types.CallExpression(types.import(), [
types.StringLiteral('./config.ts')
])
arrayDeclaration.declarations[0].init.elements.push(dynamicImport)
}
}
}
}
}
- 在项目根目录下babel.config.js 中引入插件
module.exports = {
plugins: ['./scripts/plugins/generator-code.js']
}
- 运行项目即可
注意： node_modules 可能会存在babel的缓存 导致修改后不生效 所以修改项目启动指令加上清除缓存操作
rm -rf node_modules/.cache
