Как определить глобальные переменные в webpack?

Question

[Тарас Лабяк]

Есть у меня файл, в котором определяются некоторые глобальные переменные

let isClient = !!('undefined' !== typeof window && window.document)

if (isClient) {
  window.global = window
}

global.isClient = isClient
global.isServer = !isClient
global.isChrome = isClient && !!self.chrome && !!window.chrome.webstore;
global.isBlink = isClient && isChrome && !!window.CSS;
global.isFirefox = isClient && self.InstallTrigger;

global.DEBUG = true
Object.defineProperty(global, 'DEBUG', {
  writable: false,
  value: !!('undefined' !== typeof localStorage && +localStorage.getItem('debug'))
})

global.debug = console.log.bind(console)

global.announce = function announce(objects) {
  for (let name in objects) {
    Object.defineProperty(global, name, {
      writable: true,
      value: objects[name]
    })
  }
}

И настройка webpack

const isProduction = 'prod' === process.env.MODE

const config = {
  entry: [
    __dirname + '/globals.js',
    __dirname + '/entry.jsx'
  ],
  watch: !isProduction,
  output: {
    path: __dirname + '/public',
    filename: 'gay.js',
    comments: false
  },
  module: {
    loaders: [
      {test: /\.css$/, loaders: ['style']},
      {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
      {test: /\.less$/, loaders: ['less']},
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader?limit=10000&minetype=application/font-woff"
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader"
      },
      {
        test: /\.jsx$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react'],
          plugins: ['transform-class-properties']
        }
      }
    ]
  },
  resolve: {
    modulesDirectories: [__dirname + '/node_modules']
  },
  plugins: []
}

if (isProduction) {
  config.plugins.push(
    new (require('webpack-uglify-js-plugin'))({
      cacheFolder: '/tmp',
      debug: false,
      minimize: false,
      sourceMap: false,
      compress: {
        warnings: true
      }
    })
  )
}
else {
  config.devtool = 'source-map'
}

module.exports = config

Если uglify включен, выдает ошибку что isClient (и другие глобальные переменные определены в globals.js) не существует?
Есть ли способ определить глобальные переменные или нужно обязательно использовать require/import?

Answer 1

[timfcsm]

просто импортируйте globals.js в entry.jsx ... а так у вас globals.js в отдельный бандл кладется, где больше ничего нет
а вообще есть куча разных способов, для разных случаев

Comments

[Тарас Лабяк]

entry.jsx загружается последним, поэтому я globals.js сделал отдельным entry

Answer 2

[_ _]

Пример из документации Webpack:

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9")
    TWO: "1+1"
})

RTFM

Сразу оговорюсь, как это работает. Это работает путем замены ключей их строковыми значениями. Например для

if (TEST == true) {
}

на выходе после применения плагина с { TEST: JSON.stringify(false) } будет

if (false == true) {
}

после применения к такому коду UglifyJS такая ветвь будет целиком убрана из результирующего кода.
Почему именно JSON.stringify - DefinePlugin рассматривает значения ключей, как строки, содержащие JavaScript. Поэтому булевое значение это { TEST: "false" }, а строковое значение
это { TEST: "\"false\"" }