kissarat
@kissarat
Node.js

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

Есть у меня файл, в котором определяются некоторые глобальные переменные
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?
  • Вопрос задан
  • 1565 просмотров
Пригласить эксперта
Ответы на вопрос 2
@timfcsm
просто импортируйте globals.js в entry.jsx ... а так у вас globals.js в отдельный бандл кладется, где больше ничего нет
а вообще есть куча разных способов, для разных случаев
Ответ написан
AMar4enko
@AMar4enko
Пример из документации 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\"" }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы