VueCli番外之recast

初次见面：

project

这个文件用来合并JS中的导出对象:

source.js

例如以上内容会被转化成：

source.js

看上去是不是只是将exports的值做了合并，似乎我们有另外一种方法可行：即将该文件读取并将module.exports的值用对象合并再重新写入文件。

recast

recast的魅力在于它能帮助你拆分代码并改造任意位置和结构的代码，在很多流行框架中均有用到如：webpack、vue-cli这类前端自动化的工具等。

还是以上代码，假如它是这样的：

source.js

我们的任务是修改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)
    }
  })

......
}