WebPack：需要一个 javascript 文件进入全局范围

Question

如何将供应商库require() 纳入全局范围（使用 WebPack 捆绑器）？与它是否实际上有任何exports 定义无关。 我只需要一个库，以便页面上的其他一些脚本也可以使用它。

我通过使用script-loader 找到了一个可能的解决方案，例如：

require('script-loader!./some-vendor-library.js');

并且一切正常，但该解决方案的主要缺点是包含的脚本实际上是通过 eval() 函数评估的：供应商库代码作为字符串添加到结尾 bundle.js（不是实际代码） .是否有任何类似的解决方案将库作为代码包含到末端捆绑包中，而不是作为字符串？

附：有时我需要动态地做，所以我不能把它添加到 webpack 的配置中。

Answer 1

Script-loader 遗憾地将包含的脚本包装成一个字符串，因此您可以使用Blob 或类似的东西对其进行评估。但我认为您可能想尝试其他方法。

首先：确保您的require("./path/to/a-neat-module.js") 确实在拉入文件。转到您输出的捆绑包并筛选代码以确认。 如果可能，请使用 npm 安装任何库， 这样您就可以简单、便携地调用 require("a-neat-module")

那么我怎样才能让我的非导出变量和函数暴露出来呢？

你不能直接。

在您的入口文件中，调用它将使所有导出的变量，在./js 文件夹和子目录中动态可用：

function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}
var jsModules = requireAll(require.context("./js", true, /\.js$/));

或者，如果您有特定的模块和全局考虑：

window["silly"] = require("./js/silly.js");
window["$"] = window["jQuery"] = require("jquery");

但是，如果您的文件没有导出，它只会增加您的捆绑包的大小。想想如何将代码导出到您的最终包中。这一切都被包装起来了，因此在全局范围内定义的任何变量都成为包装函数的本地变量。

所以，这就是 script-loader 和 globals-loader 等加载程序和插件的用武之地。它们有助于预处理您的文件，以便您以后可以使用。

除此之外，我不知道有任何插件可以帮助通过翻译动态转换您的非导出代码。尝试重写其中一些以支持模块化格式可能是值得的。 我知道这不是什么好消息，但可能值得考虑一下将您的 javascript 模块化需要多长时间。 几乎每个 js 库都值得使用这种设计流程来避免导入问题。

Ps：你检查过ouput.libraryTarget: "this" 在你的配置中的效果吗？有些人在这方面取得了成功。

PPs：你检查过webpack-raw-bundler吗？它会将您的代码粘贴到保留全局范围的另一个文件中，但它会在另一个文件中，因此您可以运行后期构建以在最后将两者连接在一起。我在几个前端文件，以便它们的非导出函数可用，就好像每个文件都包含在它们自己的 <script> 标记中一样。但是，您必须小心加载时间和方法重载。