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

можно ли определить глобальную переменную с помощью webpack, чтобы получить что-то вроде этого:

var myvar = {};

все примеры, которые я видел, использовали внешний файл require("imports?$=jquery!./file.js")

5 82
javascript webpack webpack-2 webpack-3

5 ответов:

есть несколько способов приблизиться к глобалам:

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

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

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

2) Webpack ProvidePlugin

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

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

utils.js

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

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

webpack.конфиг.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 the path to your utils.js file 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) Используйте глобальный объект окна (или глобальный узел)

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, если есть какие-либо ключи/учетные данные) и добавляет ваши переменные конфигурации в узел .

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

Примечания:

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

140

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

например:

js / index.js:

var foo = 3;
var bar = true;

webpack.конфиг.js

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

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

29

использовать DefinePlugin.

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

new webpack.DefinePlugin(definitions)

пример:

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

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

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

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

8

Я решил эту проблему, установив глобальные переменные в качестве статических свойств на классы, к которым они наиболее актуальны. В ES5 это выглядит так:

var Foo = function(){...};
Foo.globalVar = {};
0