webpack 创建并导出一个全局 object ，其中包含要被其他文件访问的全局变量

Question

我已经慢慢地将我的网站从使用初始化的 js object 迁移到尝试集成导入和导出方法。 多年来我一直在使用 webpack，不久前升级到 v4。

我有一个全局 object ，我想立即对其进行初始化，以便我的其他组件可以访问这些全局变量。

我原来的全局文件是这样的：

const sw = {};

sw.globalVars = () => {
    sw.path = document.location.pathname;
    sw.href = document.location.href;
    sw.dom = $('html');
    sw.body = $('body');
    ...
};

sw.globalVars();

module.exports = sw;

我可以像这样导入sw object

const sw = require('./sw');
// then I can access sw.dom as a global variale.

我现在想将其迁移到全局 window object。

我的新全局文件如下所示：

sw = {};

sw.globalVars = () => {
    sw.path = document.location.pathname;
    sw.href = document.location.href;
    sw.dom = $('html');
    sw.body = $('body');
    ...
};

sw = window.sw;
window.sw.globalVars(); // initialise the object

// export default sw; // I am assuming I don't need this export function anymore. 

我不是 100% 确定我现在如何导入全局，是使用const sw require('./sw')还是import sw from './sw';

sw object 现在在 Chrome 中未定义，尽管我可以通过控制台中的sw和window.sw访问它。 如何初始化 object 并将其分配给 window 而无需更新我所有其他部分文件中的引用。

如果您需要更多信息或需要我发布 app.js，请告诉我（我也尝试了几种方法）

更新

我现在尝试更改我的 webpack 文件以使用以下内容构建全局 js 文件：

entry: {
   app: rootFolder + srcFolder + 'app.js',
   'app.min': rootFolder + srcFolder + 'app.js',
   sw: rootFolder + srcFolder + 'js/sw.js' // this is my global object
},

在我的插件中：

new webpack.ProvidePlugin({
   identifier: path.resolve(path.join(__dirname, rootFolder + srcFolder + 'js/sw'))
})

这已将sw.js文件导出到我的 output 文件夹，但是我仍然不能 100% 确定这个全局 object 是如何导出和导入的。 我可以在我的索引文件中链接到 sw.js，但我希望 webpack 和我的部分仍然能够在需要时导入这个文件和 object。

Answer 1

好吧，我已经解决了这个问题，尽管对结果不是特别满意。

一旦我尝试了上面的第二种方法（为独立的 js 文件创建一个新入口点），导出器就可以工作，但 webpack 包含其他文件的缩小设置，所以我的 js 文件被包装在 webpack ZC1C425268E68384D1ABZA 中，例如 47774F1450，

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

所以我只是将sw.js文件复制到我的 output 文件夹并在我的模板中链接到它。

<script type="text/javascript" src="/app/js/sw.js"></script>
<script type="text/javascript" src="/app/js/app.js"></script>

它已从 webpack 工作流程中删除，即使内容相同，我也希望将源文件和 output 文件分开。 如果有人可以改进这个答案，我想听听。

2020 年 7 月 27 日更新

所以我更新了我的webpack.config （在阅读了各种复制和移动文件 npm 模块之后）。

我将此添加到配置的顶部

const fs = require('fs');
const oldPath = rootFolder + srcFolder + 'js/sw.js';
const newPath = rootFolder + outputFolder + 'js/sw.js';

fs.copyFile(oldPath, newPath, (err) => {
    if (err) {
        throw err;
    }
    console.log(`source ${oldPath} was copied to ${newPath}`);
});

它工作了，所以现在我的流程好多了（不必再担心手动复制文件了）