javascript - WebPack:需要将 javascript 文件置于全局范围内

Question

我怎样才能require()将 vendor 库纳入全局范围(使用 WebPack bundler )？独立于事实，如果它实际上有任何exports定义与否。 我只需要一个库，以便页面上的其他一些脚本也可以使用它。

我通过使用 script-loader 找到了可能的解决方案像:

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

一切都很完美，但该解决方案的主要缺点是包含的脚本实际上是通过 eval() 进行评估的功能:将 vendor 库代码添加到 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"的效果吗？在你的配置中？有些人已经取得了成功。

PP们:你结账了吗webpack-raw-bundler ？它将您的代码粘贴到另一个文件中，并保留全局范围，但它将位于另一个文件中，因此您可以运行后期构建以在最后将两者连接在一起。我在几个上运行了这个前端文件，以便它们的非导出函数可用，就像每个文件都包含在它们自己的 <script> 中一样。标签。但是，您必须谨慎对待加载时间和方法重载。