webpack创建并导出一个全局对象，该对象包含要由其他文件访问的全局变量

Question

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

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

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

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

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

我现在想将其迁移到全局窗口对象。

我的新全局文件如下：

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对象现在在Chrome中是未定义的，尽管我可以通过控制台中的sw和window.sw访问它。如何初始化对象并将其分配给窗口，而不必更新所有其他部分文件中的引用。

如果你需要更多信息或需要我发布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文件导出到我的输出文件夹中，但我仍然不能100%确定如何导出和导入此全局对象。我可以在索引文件中链接到sw.js，但我希望webpack和我的部分仍然能够在需要时导入这个文件和对象。

Answer 1

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

一旦我尝试了上面的第二种方法(为一个独立的js文件创建一个新的入口点(，导出器就可以工作了，但webpack包含了其他文件的缩小设置，所以我的js文档被封装在webpack函数中，如下所示：

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

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

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

它已经将其从webpack工作流中删除，我更愿意将源文件和输出文件分开，即使内容相同。如果有人能改进这个答案，我很想听听

更新时间：20年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}`);
});

它可以工作，所以现在我的流程好多了(再也不用担心手动复制文件了(