公开通过webpack捆绑的javascript全局变量

本文介绍了公开通过webpack捆绑的javascript全局变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 问题

我觉得这应该比它更直接。我需要从前端访问我的所有javascript库，因为我将它集成到一个旧系统中，我无法调用 require（bundle.js）; 来自前端。必须可以从前端页面的全局范围访问捆绑文件全局范围内的 ，并通过< script> 标记导入它们。

所以我需要改变旧的：

< script SRC = JS /的jquery.js >< /脚本> < script src =js / silly.js>< / script> < script> $（傻（））; // silly.js全局范围内的一些函数< / script>

到新的：

< script src =js / bundle.js>< / script> < script> $（傻（））; // silly.js全局范围内的一些函数< / script>

我尝试的东西

expose-loader：如果我没有100个全局变量，我不想明确告诉它看 。

ProvidePlugin：只有真正让图书馆看到其他图书馆。我也无法用当前的设置明确写出我需要的所有全局变量（不断添加更多）。

我是什么需要

所以为了更清楚，我需要我的 webpack.config.js 看起来像这些选项之一：

//所有东西都包含在module.exports和其他不相关的东西中插件：[ new StaticLibraryMergerSuperNeatPlugin （js / * .js）] // ... ...

或者：

规则：[ { test：/\。js$ /， 使用：[neat-merging-cool-loader，babel-loader] } ] / / ...

我这样做错了吗？

我缺少一个明显的解决方案吗？

Tl;博士： 我该怎么办？从我的捆绑的js文件中制作全局变量，当im时暴露给全局范围通过< script src =js / bundle.js>< / script> 移植到前端html页面？

顺便说一句：如果有人是网络传奇，并且知道为什么这是一个糟糕的方法，请在下面发布简短的解释，以便我可以解决我的生活。

解决方案

注意：这不是理想情况，但因为我添加了一定数量的新全局变量，我需要制作一个插件，可以为我捆绑我的javascript。

webpack-raw-bundler

这只是将您的代码堆叠在一起以包含在前端。这是我的用法示例：

用法

来自旧版：

< script src =js / jquery.js>< / script> < script src =js / silly.js>< / script> < script> $（傻（））; // silly.js全局范围内的一些函数< / script>

到新的：

< script src =js / bundle.js>< / script> < script> $（傻（））; // silly.js全局范围内的一些函数< / 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的基础。但是，如果你有一些头痛并且只想要一个简单的捆绑包，请随意使用这个插件。 / p> The Problem

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.

So I need to change the old:

<script src="js/jquery.js"></script> <script src="js/silly.js"></script> <script> $(silly()); // Some function in silly.js's global scope </script>

To the new:

<script src="js/bundle.js"></script> <script> $(silly()); // Some function in silly.js's global scope </script>

Things I've tried

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: 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).

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") ] // ...

Or:

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: How do I make globals from my bundled js files, be exposed to the global scope when imported on a frontend html page via <script src="js/bundle.js"></script>?

Btw: If anyone is a webpack legend and knows why this is a bad approach, please post below with a brief explanation so I can fix my life.

解决方案

Note: This is not the ideal scenario but because I have a constant amount of new globals being added, I needed to make a plugin to bundle my javascript for me.

webpack-raw-bundler

This simply stacks your code together to be included on the frontend. Here is my usage example:

Usage

From the old:

<script src="js/jquery.js"></script> <script src="js/silly.js"></script> <script> $(silly()); // Some function in silly.js's global scope </script>

To the new:

<script src="js/bundle.js"></script> <script> $(silly()); // Some function in silly.js's global scope </script>

Installing to the config

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' ] }) ] }

A Fair Warning:

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.