Question

如何将供应商库require()纳入全局范围（使用WebPack捆绑包）？如果它实际上有任何exports定义，则独立于事实。我只需要一个库，这样页面上的其他一些脚本也可以使用它。

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

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

一切都运行良好，但该解决方案的主要缺点是所包含的脚本实际上是通过eval()函数评估的：供应商库代码作为字符串添加到结束bundle.js（不是一个实际的代码）。是否有任何类似的解决方案将作为代码包含在end-bundle中的库，而不是作为字符串？

P.S。有时我需要动态地执行此操作，因此，我无法将其添加到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吗？它会将您的代码粘贴到保留全局范围的另一个文件中，但它将存放在另一个文件中，因此您可以运行post build以在最后将两者连接在一起。我在几个上运行它前端文件，以便它们的非导出函数可用，就好像每个文件都包含在它们自己的<script>标记中一样。但是，您必须对加载时间和方法重载保持谨慎。

WebPack：需要将javascript文件放入全局范围

1 个答案:

那么如何才能使我的非导出变量和函数暴露？