公开通过webpack捆绑的javascript全局变量 [英] Expose javascript globals bundled via webpack

问题描述

问题

我觉得这应该比它更直接。我需要从前端访问我的所有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> 
  

我尝试的东西

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




2. 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

1. 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.

2. 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.

这篇关于公开通过webpack捆绑的javascript全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！