Question

我正在尝试创建一个webpack插件，它将解析某个函数的代码并将其替换为另一个函数，该插件还将新函数公开为全局函数。

class someName {
  constructor(local, domain, translationFile, options) {
  }

  apply(compiler) {

    // exposing ngt function as a global
    compiler.plugin('make', function(compilation, callback) {
      var childCompiler = compilation.createChildCompiler('someNameExpose');
      childCompiler.apply(new webpack.DefinePlugin({
        ngt: function(singular , plural, quantity) {
          return quantity == 1 ? singular : plural;
        }
      }));
      childCompiler.runAsChild(callback);
    });

    // searching for the getValue function
    compiler.parser.plugin(`call getValue`, function someNameHandler(expr) {

      // create a function to replace getValue with
      let results = 'ngt('+ expr.arguments  +')';
      const dep = new ConstDependency(results, expr.range);
      dep.loc = expr.loc;
      this.state.current.addDependency(dep);
      return true;
    });
  }
}

module.exports = someName;

更新/改写

我在这里遇到问题，当compiler.parser.plugin('call getValue', function someNameHandler(expr) {...}块被评论时，ngt函数作为全局存在。

当没有评论时，我收到错误，ngt未定义。

我的意思是/**/

我找到了一个解决方法，但它远远超过了想法。现在我做的是导出一个匿名函数，它可以完成我想要的任务。

你可以在这里看到插件： Github

Answer 1

您可以使用webpack-merge插件，它可以完全满足您的需求。

https://github.com/survivejs/webpack-merge

Answer 2

您可以根据环境覆盖该方法。让我们说你有一个方法

function a(){
  //original defination
}

现在基于环境，如果它是一个制作你可以做这样的事情

if (environment.production) {
   function a(){
     //overridden defination
   }
}

webpack插件用另一个替换一个函数

2 个答案: