WebPack:需要一个 javascript 文件到全局范围
WebPack: require a javascript file into global scope
如何 require()
将供应商库放入全局范围(使用 WebPack 捆绑器)?独立于它是否真的有任何 exports
定义的事实。
我只需要一个库,这样页面上的其他一些脚本也可以使用它。
我已经通过使用 script-loader
找到了一个可能的解决方案,例如:
require('script-loader!./some-vendor-library.js');
并且一切正常,但该解决方案的主要缺点是包含的脚本实际上是通过 eval()
函数求值的:供应商库代码作为字符串添加到 bundle.js
末尾(不是实际代码)。是否有任何类似的解决方案将库作为代码而不是字符串包含在最终包中?
P.S。有时我需要动态地做,所以,我不能将它添加到 webpack 的配置中。
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 构建以在最后将两者连接在一起。 我在一些前端文件上 运行 这样可以使用它们的非导出函数,就好像每个文件都包含在它们自己的 <script>
标记中一样。但是,您必须谨慎对待加载时间和方法重载。
如何 require()
将供应商库放入全局范围(使用 WebPack 捆绑器)?独立于它是否真的有任何 exports
定义的事实。
我只需要一个库,这样页面上的其他一些脚本也可以使用它。
我已经通过使用 script-loader
找到了一个可能的解决方案,例如:
require('script-loader!./some-vendor-library.js');
并且一切正常,但该解决方案的主要缺点是包含的脚本实际上是通过 eval()
函数求值的:供应商库代码作为字符串添加到 bundle.js
末尾(不是实际代码)。是否有任何类似的解决方案将库作为代码而不是字符串包含在最终包中?
P.S。有时我需要动态地做,所以,我不能将它添加到 webpack 的配置中。
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 构建以在最后将两者连接在一起。 我在一些前端文件上 运行 这样可以使用它们的非导出函数,就好像每个文件都包含在它们自己的 <script>
标记中一样。但是,您必须谨慎对待加载时间和方法重载。