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

Question

I've slowly migrated my site from using an initialised js object to trying to integrate import and export methods. I've been using webpack for years, and not long ago upgraded to v4.

I have a global object that I want to initialise immediately so that my other components can access these global variables.

My original global file looked like this:

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;

And I can import the sw object like so

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

I'm now wanting to migrate this to a global window object.

My new global file looks like this:

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. 

I am not 100% sure how I now import the global, whether to use const sw require('./sw') or import sw from './sw';

The sw object is now undefined in Chrome, although I can access it via sw and window.sw in the console. How to initialise the object and assign it to the window without having to update references in all my other partial files.

If you need more info or need me to post the app.js let me know (I have tried a couple of methods with that also)

Update

I've now tried to change my webpack file to build a global js file using this:

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

And in my plugins:

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

This has exported a sw.js file to my output folder, however I am still not 100% sure about how this global object is meant to be exported and imported. I could just link to sw.js in my index file but I would expect webpack and my partials to still be able to import this file and object as and when needed.

Answer 1

Well I have solved this although not particularly happy with the result.

Once I tried the second method above (creating a new entry point for a standalone js file), the exporter works but webpack includes the minification settings for the other files, so my js file gets wrapped in the webpack function, like so:

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

So I just copied the sw.js file to my output folder and linked to it in my template.

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

It's taken it out of the webpack workflow, and I would prefer to keep the source file and output file separate even if the content is the same. If anyone can improve upon this answer I would like to hear it.

Update 27/07/20

So I updated my webpack.config (after reading about various copy and move file npm modules).

I added this to the top of my config

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}`);
});

It works so now my flow is much better (not having to worry about manually copying files anymore)