代码之家 › 专栏 › 技术社区 › impulsgraw

网页包:需要全局范围内的javascript文件

global-scope require webpack javascript

2

impulsgraw · 技术社区 · 7 年前

require() exports 是否定义。我只需要一个库,这样页面上的其他脚本也可以使用它。

我已经通过使用找到了一个可能的解决方案 script-loader

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

一切都很完美,但该解决方案的关键缺点是,包含的脚本实际上是通过 eval() bundle.js

P、有时我需要动态地做这件事,所以我不能把它添加到网页的配置中。

1 回复 | 直到 7 年前

1

3

Community CDub 4 年前

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 进来吧它们有助于预处理文件,以便稍后提供给您。

我知道这不是什么好消息, 几乎每个js库都值得它的salt函数使用此设计流来避免导入问题。

附言:你有没有检查过 ouput.libraryTarget: "this"

PPs:你退房了吗 webpack-raw-bundler ? 它会将您的代码粘贴到另一个保留全局范围的文件中, 但它将在另一个文件中,因此您可以在最后运行一个后构建来将两者连接在一起。 <script> 标签。然而,您必须对加载时间和方法重载保持谨慎。