javascript - 公开通过 webpack bundle 的 javascript 全局变量

Question

问题

我觉得这应该比实际更直接。我需要从前端访问我所有的 javascript 库，因为我正在将它集成到旧系统中，所以我无法调用 require("bundle.js");从前端。 全局范围内的所有内容 必须可以从前端页面的全局范围访问，通过 <script> 导入它们标签。

所以我需要改变旧的:

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

我尝试过的事情

1. expose-loader:如果我没有 100 个我不想明确告诉它看的全局变量，这将完全有效 为。

2. ProvidePlugin: 只真正让图书馆看到其他图书馆。我也无法用我当前的设置明确地编写我需要的所有全局变量(不断添加更多)。

我需要什么

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

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

我做错了吗？

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

Tl;博士: 如何从 bundle 的 js 文件创建全局变量，当通过 <script src="js/bundle.js"></script> 导入到前端 html 页面时暴露在全局范围内？ ?

顺便说一句:如果有人是 webpack 的传奇人物并且知道为什么这是一个糟糕的方法，请在下面发帖并附上简短的解释，这样我就可以改过自新了。

Answer 1

这是我如何在自己的网站上执行此操作的示例。我不确定这是唯一的方法，还是最好的方法，但它干净、简单，而且对我有用。

重要旁注 - 在窗口上声明内容时使用 window["propName"] 因为当您运行 webpack -p 时它会丑化任何非字符串，因此如果您将其定义为 window.propName，它可能会更改为类似 s.c 的内容，而您的其余代码不知道它是什么.用括号表示法将其声明为字符串将强制 webpack 保持名称完整，以便您可以从任何地方使用相同的名称访问它。

site.ts(可以是 .js，无所谓)

/*************************/
/*** JQUERY + JQUERYUI ***/
/*************************/
/* var declaration for typescript - not needed if not using .ts */
declare var $:JQueryStatic; declare var jQuery:JQueryStatic;
window["$"] = window["jQuery"] = require("jquery");
require("jquery-ui/effects/effect-slide");
require("jquery-ui/widgets/autocomplete");
require("jquery-ui/widgets/button");
require("jquery-ui/widgets/datepicker");
require("jquery-ui/widgets/tooltip");
/*************************/
/* END JQUERY + JQUERYUI */
/*************************/

/***************/
/*** ANGULAR ***/
/***************/
/* var declaration for typescript - not needed if not using .ts */
declare var angular:ng.IAngularStatic;
window["angular"] = require("angular");
require("angular-sanitize");
/***************/
/* END ANGULAR */
/***************/

/************************/
/*** MISC THIRD-PARTY ***/
/************************/
window["moment"] = require("moment");
window["saveAs"] = require("FileSaver").saveAs;
window["JSZip"] = require("jszip");
/************************/
/* END MISC THIRD-PARTY */
/************************/

/* var declaration for typescript - not needed if not using .ts */
declare var globals:Globals;
window["globals"] = require("./globals");

Layout.html(在每个页面上加载)

.....
<script src="/dist/scripts/site.bundle.js"></script>
.....

webpack.config.js

var path = require('path');
var resolve = path.resolve;
var AssetsPlugin = require('assets-webpack-plugin');
var WebpackCleanupPlugin = require("webpack-cleanup-plugin");
'use strict';

var babelOptions = {
    "presets": [
      [
        "es2015",
        {
            "modules": false
        }
      ],
      "es2016"
    ]
};

module.exports = [{
    cache: true,
    context: resolve('Scripts'),
    devtool: "source-map",
    entry: {
        site: './site.ts',
    },
    output: {
        path: path.resolve(__dirname, './dist/scripts'),
        filename: '[name].bundle.js',
    },
    module: {
        rules: [{
            test: /\.ts$/,
            exclude: /node_modules/,
            use: [
              {
                  loader: 'babel-loader',
                  options: babelOptions
              },
              {
                  loader: 'ts-loader'
              }
            ]
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
              {
                  loader: 'babel-loader',
                  options: babelOptions
              }
            ]
        }]
    },
    plugins: [
        new AssetsPlugin({ path: path.resolve(__dirname, './dist/assets') }),
        new WebpackCleanupPlugin({})
    ],
}];