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

2019-09-30 19:36:40 阅读：259 来源： 互联网

标签：javascript webpack bundle frontend

问题

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

我尝试过的事情

> expose-loader：如果我没有100个全局变量,我不想明确告诉它看,这将完全有效
对于.
> 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;博士：
如何通过< script src =“js / bundle.js”>< / script>？在我的捆绑的js文件中创建全局变量,在前端html页面上导入时暴露给全局范围

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

解决方法:

这是我在自己的网站上如何做的一个例子.我不确定这是唯一的方式,甚至是最好的方式,但它干净,简单,对我有用.

重要的注意事项 – 在窗口上声明事物时使用窗口[“propName”]因为当你运行webpack -p时它将uglify任何非字符串,所以如果你把它定义为window.propName,它可以变成像sc这样的东西而你的其余代码不知道它是什么.使用括号表示法将其声明为字符串将强制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({})
    ],
}];

标签：javascript,webpack,bundle,frontend
来源： https://codeday.me/bug/20190930/1836749.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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