公开通过 webpack 捆绑的 javascript 全局变量 [英] Expose javascript globals bundled via webpack
问题描述
我觉得这应该比现在更直接.我需要从前端访问我所有的 javascript 库,因为我将它集成到一个旧系统中,我不能从前端调用 require("bundle.js");
.捆绑文件全局范围内的所有内容必须可以从前端页面的全局范围访问,通过标签导入它们.
I feel like this should be more straightforward than it is. I need to access all my javascript libraries from the frontend and because I'm integrating it into an old system, I cannot call require("bundle.js");
from the frontend. Everything in the global scope of the bundled files must be accessible from the global scope of the frontend page importing them through the <script>
tag.
所以我需要改变旧的:
<script src="js/jquery.js"></script>
<script src="js/silly.js"></script>
<script>
$(silly()); // Some function in silly.js's global scope
</script>
新的:
<script src="js/bundle.js"></script>
<script>
$(silly()); // Some function in silly.js's global scope
</script>
我尝试过的事情
expose-loader: 如果我没有 100 个不想明确告诉它查看的全局变量,这将完全有效
expose-loader: This would totally work if I didn't have 100 global variables that I don't want to explicitly tell it to look for.
ProvidePlugin: 只真正让库看到其他库.我也无法使用当前设置明确编写我需要的所有全局变量(不断添加更多).
ProvidePlugin: Only really lets the libraries see the other libraries. I also cannot explicitly write all the globals I need with my current setup (More are added constantly).
我需要什么
所以为了更清楚,我需要我的 webpack.config.js
看起来像以下选项之一:
What I need
So for more clarity, I need my webpack.config.js
to look like one of these options:
// Everything is wrapped in module.exports and other irrelevant things
plugins: [
new StaticLibraryMergerSuperNeatPlugin("js/*.js")
]
// ...
或者:
rules: [
{
test: /.js$/,
use: [
"neat-merging-cool-loader",
"babel-loader"]
}
]
// ...
我这样做错了吗?
是否有我遗漏的明显解决方案?
Am I going about this wrong?
Is there an obvious solution I am missing?
Tl;Dr:如何从捆绑的 js 文件制作全局变量,当通过 <script src="js/bundle.js"></script> 在前端 html 页面上导入时,将其暴露给全局范围;
?
顺便说一句:如果有人是 webpack 传奇并且知道为什么这是一个糟糕的方法,请在下面发布一个简短的解释,以便我可以解决我的问题.
推荐答案
注意:这不是理想的方案,但因为我添加了恒定数量的新全局变量,我需要制作一个插件来捆绑我的javascript 对我来说.
这只是将您的代码堆叠在一起以包含在前端.这是我的用法示例:
This simply stacks your code together to be included on the frontend. Here is my usage example:
从旧:
<script src="js/jquery.js"></script>
<script src="js/silly.js"></script>
<script>
$(silly()); // Some function in silly.js's global scope
</script>
新的:
<script src="js/bundle.js"></script>
<script>
$(silly()); // Some function in silly.js's global scope
</script>
安装到配置
var RawBundlerPlugin = require('webpack-raw-bundler');
module.exports = {
plugins: [
new RawBundlerPlugin({
excludedFilenames: [/angulartics/],
readEncoding: "utf-8",
includeFilePathComments: false,
bundles: [ "vendor.js", "styles.css" ],
"vendor.js": [
'js/*.js'
],
"styles.css": [
'css/bootstrap.css',
'css/edits.css'
]
})
]
}
公平警告:
这不应该是您的首选解决方案,但我遇到了一个糟糕的案例,使这成为最简单的选择.使用 expose-loader
和 import
或 window['module'] = require('module.js')
更安全,因为这就是webpack 是围绕它构建的.但是,如果您有一些头疼的问题并且只想要一个简单的打包器,请随意使用这个插件.
This should not be your go-to solution, but I had a bad case that made this the easiest option. Using expose-loader
and import
or window['module'] = require('module.js')
is much safer as that is what webpack was built around. However, if you are having some headaches and just want a simple bundler, feel free to use this plugin.
这篇关于公开通过 webpack 捆绑的 javascript 全局变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!