7

我对 webpack 允许公开在 npm 上不可用或放入包中的变量的各种方式有点困惑。我能够google通过使用公开谷歌可视化图表脚本的全局变量 

resolve: {
    extensions: ['.js', '.json'],
    alias: {
      'google': path.resolve(__dirname, 'vendor', 'google.js')
    }
  }

结合

  plugins: [
    new webpack.ProvidePlugin({
      'google': 'google'
    })
  ]

但是查看webpack 文档，还有其他几种shim方法，看起来他们可能会做类似的事情。有imports-loader和exports-loader, 和script-loader。我知道我已经链接到文档，但我仍然发现他们对何时应该使用这四个的描述有点不清楚。

还看这个例子，这require不是分配给变量吗？它打算去哪里？关于这种语法发生了什么的文档在哪里？

require("imports?$=jquery!./file.js")

有人可以为我提供一些何时应该使用这些的例子吗？

4

2 回答 2

4

scripts-loader

我自己从未使用过这个，但我想这个想法很简单。我认为如果由于某种原因您想在无法控制它们的模块/文件之一中注入脚本或函数或其他内容，则可以使用它。

imports-loader&exports-loader

在我开发的一个应用程序中，我们必须使用tinymce它在旧版本中依赖于this始终window，因为它被构建为作为全局脚本工作。不作为 CommonJS 或 ES 模块。

所以为了解决这个问题，我们必须使用import-loader它才能注入window到脚本中。这里的样子webpack.config.js

{ test: require.resolve('tinymce/tinymce'), use: ['imports?this=>window', 'exports?tinymce'] }

其中说注入window代替this& 我们在exports-loader这里使用，因此我们可以将全局tinymce导出为命名的默认导出tinymce，以便我们可以将其用作我们应用程序中的普通模块。

值得庆幸的是，所有这些都已在最新版本中修复。

ProvidePlugin

以我的经验，当一个库依赖于全局范围内的另一个库时，这很有用。例如，像 jQuery 插件一样，它们确实使用其中之一$, window.$, jQuery&window.jQuery

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.$': 'jquery',
    'window.jQuery': 'jquery',
  }),

所以这个插件要做的是确保当webpack看到这些变体之一时，它会向它提供 jQuery 对象。

这与imports-loader例如您可能不知道哪个脚本使用了哪个变体之间的区别。因此，您可以在更具体webpack的情况下处理此问题。imports-loader

我希望这有助于您了解它们之间的差异，这也是我认为比您检查的那个更好的新文档页面https://webpack.js.org/guides/shimming/

于 2017-06-14T19:33:43.187 回答
4

imports而且exportsloaders很容易理解。如果您使用其中一个或两者，您的模块将被包装到另一个带有导出和导入的函数中。

例如，我使用的paho-mqtt模块意味着在页面上像全局一样使用<script src="">：

import Paho from 'imports-loader?this=>window!exports-loader?Paho!paho-mqtt';

//and this is transformed by webpack to something like:
(function(window){

    //wow you can use `window here`, `this` in the global context === window.


   // original module code here
   // that exposes global var `Paho`


   module.exports = Paho;

})(this);
于 2017-06-15T13:40:59.957 回答