Определение глобальной переменной с помощью webpack

Ответ 1

Существует несколько способов подхода к глобальным переменным:

1) Поместите переменные в модуль.

Webpack оценивает модули только один раз, поэтому ваш экземпляр остается глобальным и переносит изменения с модуля на модуль. Итак, если вы создаете что-то вроде globals.js и экспортируете объект из всех ваших глобалов, тогда вы может import './globals' и читать/записывать эти глобальные переменные. Вы можете импортировать в один модуль, вносить изменения в объект из функции и импортировать в другой модуль и читать эти изменения в функции. Также помните, что все происходит. Webpack сначала возьмет все импорт и загрузит их, чтобы начать с вашего entry.js. Затем он выполнит entry.js. Поэтому, когда вы читаете/пишете глобальные значения, важно. Это из корневой области модуля или в функции, называемой позже?

Примечание. Если вы хотите, чтобы экземпляр был new каждый раз, используйте класс ES6. Традиционно в JS вы будете использовать классы (в отличие от нижнего регистра для объектов), например, import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()

2) Webpack ProvidePlugin

Здесь вы можете сделать это с помощью Webpack ProvidePlugin (который делает модуль доступным как переменная в каждом модуле и только те модули, в которых вы его используете). Это полезно, если вы не хотите продолжать печатать import Bar from 'foo' снова и снова. Или вы можете ввести такой пакет, как jQuery или lodash, как глобальный (хотя вы можете взглянуть на Webpack Externals).

Шаг 1) Создайте любой модуль. Например, был бы полезен глобальный набор утилит:

utils.js

export function sayHello () {
  console.log('hello')
}

Шаг 2) Выполните псевдоним модуля и добавьте в ProvidePlugin:

webpack.config.js

var webpack = require("webpack");
var path = require("path");

// ...

module.exports = {

  // ...

  resolve: {
    extensions: ['', '.js'],
    alias: {
      'utils': path.resolve(__dirname, './utils')  // <-- When you build or restart dev-server, you'll get an error if path is incorrect.
    }
  },

  plugins: [

    // ...

    new webpack.ProvidePlugin({
      'utils': 'utils'
    })
  ]  

}

Теперь просто вызовите utils.sayHello() в любом js файле, и он должен работать. Убедитесь, что вы перезагрузите ваш dev-сервер, если вы используете его с помощью Webpack.

Примечание. Не забудьте сообщить об этом в глобальном масштабе, чтобы он не жаловался. Например, см. Мой ответ для ESLint здесь.

3) Использовать Webpack DefinePlugin

Если вы просто хотите использовать const со строковыми значениями для ваших глобальных переменных, вы можете добавить этот плагин в список плагинов Webpack:

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

Используйте его как:

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

4) Используйте глобальный объект окна (или Node глобальный)

window.foo = 'bar'  // For SPA's, browser environment.
global.foo = 'bar'  // Webpack will automatically convert this to window if your project is targeted for web (default), read more here: https://webpack.js.org/configuration/node/

Вы увидите, что это обычно используется для полиполков, например: window.Promise = Bluebird

5) Используйте пакет, например dotenv

(Для проектов на стороне сервера) Пакет dotenv будет принимать локальный файл конфигурации (который вы можете добавить в свой .gitignore, если есть какие-либо ключи/учетные данные) и добавляет переменные конфигурации в Node process.env.

// As early as possible in your application, require and configure dotenv.    
require('dotenv').config()

Создайте файл .env в корневом каталоге вашего проекта. Добавьте переменные, зависящие от среды, на новые строки в форме NAME=VALUE. Например:

DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

Что это.

process.env теперь имеет ключи и значения, определенные вами в файле .env.

var db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})

Примечания:

Что касается Webpack Externals, используйте его, если вы хотите исключить некоторые модули из встроенного пакета. Webpack сделает модуль доступным по всему миру, но не поместит его в ваш пакет. Это удобно для больших библиотек, таких как jQuery или Lodash (поскольку древовидные внешние пакеты не работают в Webpack). Затем рассмотрим возможность поиска в библиотечном подходе Webpack (который включает в себя возможность использовать тег script в вашем index.html для глобальных переменных).

Ответ 2

Я собирался задать тот же вопрос. После дальнейшего поиска и депиляции части документации веб-пакета я думаю, что вы хотите output.library и output.libraryTarget в файле webpack.config.js.

Например:

JS/index.js:

var foo = 3;
var bar = true;

webpack.config.js

module.exports = {
   ...
   entry: './js/index.js',
   output: {
      path: './www/js/',
      filename: 'index.js',
      library: 'myLibrary',
      libraryTarget: 'var'
   ...
}

Теперь, если вы связали сгенерированный файл www/js/index.js в теге html script, вы можете получить доступ к myLibrary.foo из любого места в других сценариях.

Ответ 3

Используйте DefinePlugin.

DefinePlugin позволяет создавать глобальные константы, которые могут быть настроен во время компиляции.

new webpack.DefinePlugin(definitions)

Пример:

plugins: [
  new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true)
  })
  //...
]

Использование:

console.log(`Environment is in production: ${PRODUCTION}`);

Ответ 4

Вы можете использовать define window.myvar = {}. Когда вы хотите использовать его, вы можете использовать как window.myvar = 1