Variable masking | 易学教程

问题

I have a class defined in an index.js file like this

const BLOG = BLOG || {};
BLOG.ComponentFactory =  class {
}
window.BLOG = BLOG;

Then, in a file init.js in a bundle, I try to access that var, the file is like this

const BLOG = BLOG || {};
BLOG.init = function() {
    var c = new BLOG.ComponentFactory()
}

I get BLOG.ComponentFactory is not a constructor and I cannot understand why. Is the BLOG definition inside the file init.js masking the global var?

There is something strange: using Chrome debugger in the init function, I see Blog.ComponentFactory defined inside "Global", but if I add to the properties to watch, I see Blog.ComponentFactory = undefined

I'd like to understand what's happening.

I need to defin BLOG as a global var as I'm using ES6 together with old javascritpt code.

EDIT: if I use the following code all works (init.js)

const BLOG = BLOG || {};
BLOG.init = function() {
    var c = new window.BLOG.ComponentFactory()
}

So, it seems the local const BLOG is masking the global BLOG var, but I need to define BLOG because otherwise I get BLOG is undefined. So, how do I solve the problem?

EDIT2: my webpack config (the problem is in the bundling, the vars are defined inside functions which are generated while bundling)

const webpack = require('webpack');
const path = require('path');

var config = {
    module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
    ]
  },
    // workaround for
    // ERROR in ./node_modules/wpcom/build/lib/site.media.js
  //  Module not found: Error: Can't resolve 'fs' in '/node_modules/wpcom/build/lib'
    node: {
    fs: 'empty'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
    plugins: [
     new webpack.HotModuleReplacementPlugin()
 ]
};

var aConfig = Object.assign({}, config, {
    name: "a",
    entry: "./WebContent/js/blog/index.js",
    output: {
       path: __dirname + '/WebContent/js/blogW',
       filename: "bundle.js",
       publicPath: 'http://localhost:8080/js/blogW'
    },
    devServer: {
     historyApiFallback: true,
     contentBase: './WebContent',
     publicPath: "http://localhost:8080/js/blogW",
     hot: true
    }
});


module.exports = [
    aConfig
];

来源：https://stackoverflow.com/questions/53964271/variable-masking

标签

javascript

variables

bundle