初次见面:
这个文件用来合并JS中的导出对象:
例如以上内容会被转化成:
看上去是不是只是将exports的值做了合并,似乎我们有另外一种方法可行:即将该文件读取并将module.exports的值用对象合并再重新写入文件。
recast
recast的魅力在于它能帮助你拆分代码并改造任意位置和结构的代码,在很多流行框架中均有用到如:webpack、vue-cli这类前端自动化的工具等。
还是以上代码,假如它是这样的:
我们的任务是修改config.css.modules为false:
const value = {
foo: true
}
transform(value,source)
transform即开头处的文件主体
简单使用
const recast = require("recast");
const ast = recast.parse(source)
recast.types.visit(ast, {
visitAssignmentExpression (path) {
const { node } = path
console.log(node)
this.traverse(path)
}
})
以上代码展示了查找定义表达式并打印在控制台
this.traverse(path); 必要-用于结束执行
想要加深对recast了解,必须要先熟悉AST(抽象语法树),只有深入AST,你才能用好recast,因为recast就是操作AST的工具,如果你都不知道这个工具是用来干嘛的,你怎么能用好它呢?
关于AST,网上有很多文章,在此就不赘述了。
源码
打开开头部分的源码,相信此时你已经知道这个文件的大概了
module.exports = function extendJSConfig (value, source) {
const recast = require('recast')
const stringifyJS = require('./stringifyJS')
let exportsIdentifier = null
const ast = recast.parse(source)
recast.types.visit(ast, {
visitAssignmentExpression (path) {
const { node } = path
if (
node.left.type === 'MemberExpression' &&
node.left.object.name === 'module' &&
node.left.property.name === 'exports'
) {
if (node.right.type === 'ObjectExpression') {
augmentExports(node.right)
} else if (node.right.type === 'Identifier') {
// do a second pass
exportsIdentifier = node.right.name
}
return false
}
this.traverse(path)
}
})
......
}