Переменная маскировка - PullRequest
Новая
       8

Переменная маскировка

0 голосов
/ 29 декабря 2018

У меня есть класс, определенный в файле index.js, как этот 

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

Затем, в файле init.js в комплекте, я пытаюсь получить доступ к этому var, файл выглядит так 

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

Я получаю BLOG.ComponentFactory is not a constructor и не могу понять почему.Определение BLOG внутри файла init.js маскирует глобальную переменную?

Есть что-то странное: используя отладчик Chrome в функции инициализации, я вижу Blog.ComponentFactory, определенный внутри «Global», но если я добавлю к свойствам для просмотра, я вижу Blog.ComponentFactory = undefined

Я хотел бы понять, что происходит.

Мне нужно определить BLOG как глобальную переменную, поскольку я использую ES6 вместе со старым кодом javascritpt.

EDIT : если я использую следующий код, все работает (init.js) 

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

Итак, кажется, что локальный const BLOG маскирует глобальный BLOG var, но мне нужно определить BLOG, потому что в противном случае я получаюБЛОГ не определен.Итак, как мне решить проблему?

EDIT2 : мой конфиг веб-пакета (проблема в пакетировании, переменные определены внутри функций, которые генерируются при пакетировании) 

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
];
...