`scripts-loader`

Question

我对webpack允许暴露npm上不可用的变量或放入捆绑包中的变量的各种方式有点困惑。我能够使用

公开谷歌可视化图表脚本的全局google var

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

结合

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

然而看the webpack docs还有其他几种 shim 的方式，看起来他们可能会做类似的事情。有imports-loader和exports-loader以及script-loader。我知道我已经链接到了文档，但我仍然发现他们对这四个文章的使用时间有点不清楚。

同样看一下这个例子，这个require是不是分配给了一个变量？它意味着去哪儿了？关于这种语法发生了什么的文档在哪里？

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

Answer 1

Flex和imports个加载器非常易于理解。如果您使用其中一个或两者，您的模块将被包装到另一个带有导出和导入的函数中。

例如，我正在使用exports模块，就像页面上的全局paho-mqtt一样：

<script src="">

Answer 2

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

`imports-loader`＆amp; `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＆amp;我们也在这里使用exports-loader，因此我们可以将全局tinymce导出为名为tinymce的默认导出，以便我们可以将其用作应用中的普通模块。

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

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

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

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

这与＆amp; imports-loader例如，您可能不知道哪个脚本使用了哪种变体。所以你让webpack处理这个问题，而imports-loader则更具体。

我希望这有助于你理解所有这些之间的差异，这也是新的文档页面，我认为比你检查的更好https://webpack.js.org/guides/shimming/