2

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

我通过使用以下方法找到了可能的解决方案script-loader：

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

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

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

4

1 回答 1

3

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>标签中一样。但是，您必须小心加载时间和方法重载。

于 2017-07-06T17:28:01.193 回答