微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何你可以在 Webpack 编译钩子中操作 AST 吗?

如何解决如何你可以在 Webpack 编译钩子中操作 AST 吗?

对于一些内部工具,我正在尝试使用 webpack 将源文件名写入 javascript 源。我想出了下面的代码。不幸的是,虽然它确实替换了提供的 AST 中的 '[filename]',但该更改似乎被丢弃了。在这种情况下 AST 是只读的吗? (而且可能,如果不是这样,你怎么能做到这一点?)

const NAME = 'InjectFilenamePlugin'

const SOURCE_TEST = /src/i // a path to ensure node_modules are bypassed
const PLACEHOLDER = '[filename]'

class InjectFilenamePlugin {

  apply(compiler) {
    compiler.hooks.compilation.tap(NAME,(_,params) => {
      const { normalModuleFactory } = params

      function handler(parser) {
        parser.hooks.program.tap(NAME,(ast) => {
          const { resource } = parser.state.module

          if (SOURCE_TEST.test(resource) && ast) {
            replacePlaceholder(ast)
          }

          function replacePlaceholder(node) {
            if (node.value === PLACEHOLDER) {
              node.value = resource
              node.raw = `"${resource}"`
            } else {
              Object.values(node)
                .filter(node => node && typeof node === 'object')
                .forEach(replacePlaceholder)
            }
          }
        })
      }

      normalModuleFactory.hooks.parser
        .for('javascript/auto')
        .tap(NAME,handler)
      normalModuleFactory.hooks.parser
        .for('javascript/dynamic')
        .tap(NAME,handler)
      normalModuleFactory.hooks.parser
        .for('javascript/esm')
        .tap(NAME,handler)
    })

  }

}

module.exports = InjectFilenamePlugin

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。