公开通过webpack捆绑的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; Dr: 我如何从我的捆绑的js文件中创建全局变量,当通过前端html页面导入时,会暴露给全局范围<script src="js/bundle.js"></script>？

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

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({})
    ],
}];

Answer 2

注意：这不是理想的场景，但因为我不断添加新的全局变量，所以我需要制作一个插件来为我捆绑我的 javascript。

webpack-raw-bundler

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

用法

从旧的：

<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-loaderand importorwindow['module'] = require('module.js')更安全，因为 webpack 就是围绕它构建的。但是，如果您遇到一些麻烦并且只想要一个简单的捆绑器，请随意使用此插件。