Можно ли определить глобальную переменную с помощью веб-пакета, чтобы получить что-то вроде этого:
var myvar = {};
Все примеры, которые я видел, использовали внешний файл require("imports?$=jquery!./file.js")
источник
Можно ли определить глобальную переменную с помощью веб-пакета, чтобы получить что-то вроде этого:
var myvar = {};
Все примеры, которые я видел, использовали внешний файл require("imports?$=jquery!./file.js")
Есть несколько способов приблизиться к глобалам:
Webpack оценивает модули только один раз, поэтому ваш экземпляр остается глобальным и передает изменения от модуля к модулю. Так что если вы создаете что-то вроде a globals.js
и экспортируете объект из всех ваших глобальных переменных, то вы можете import './globals'
и читать / записывать в эти глобальные глобальные переменные. Вы можете импортировать в один модуль, вносить изменения в объект из функции, импортировать в другой модуль и считывать эти изменения в функции. Также запомните порядок вещей. Webpack сначала берет все импортируемые файлы и загружает их по порядку, начиная с вашего entry.js
. Тогда это выполнится entry.js
. Поэтому, где вы читаете / пишете глобальные переменные, важно. Это из корневой области модуля или из функции, вызываемой позже?
Примечание . Если вы хотите, чтобы экземпляр был new
каждый раз, используйте класс ES6 . Традиционно в JS вы должны использовать классы с заглавной буквы (в отличие от строчных букв для объектов), например
import FooBar from './foo-bar' // <-- Usage: myFooBar = new FooBar()
Вот как вы можете сделать это с помощью веб-пакета ProvidePlugin (который делает модуль доступным в качестве переменной в каждом модуле и только в тех модулях, где вы его фактически используете). Это полезно, когда вы не хотите продолжать печатать import Bar from 'foo'
снова и снова. Или вы можете добавить пакет, такой как глобальный jQuery или lodash (хотя вы можете взглянуть на внешние компоненты Webpack ).
Шаг 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 the path to your utils.js file is incorrect.
}
},
plugins: [
// ...
new webpack.ProvidePlugin({
'utils': 'utils'
})
]
}
Теперь просто позвоните utils.sayHello()
в любой файл JS, и он должен работать. Убедитесь, что вы перезапускаете свой dev-сервер, если используете его с Webpack.
Примечание: не забудьте рассказать своему линтеру о глобальном, чтобы он не жаловался. Например, см. Мой ответ для ESLint здесь .
Если вы просто хотите использовать 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");
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
(Для проектов на стороне сервера) Пакет dotenv возьмет локальный файл конфигурации (который вы можете добавить в свой .gitignore, если есть какие-либо ключи / учетные данные) и добавит ваши переменные конфигурации в объект 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 , используйте его, если вы хотите исключить некоторые модули из вашего встроенного комплекта. Webpack сделает модуль глобально доступным, но не добавит его в ваш пакет. Это удобно для больших библиотек, таких как jQuery (потому что внешние пакеты не работают в Webpack ), где они уже загружены на страницу в виде отдельных тегов сценария (возможно, из CDN).
utils
пространство имен в целевой файл - изначально я только что установил точку останова в браузере окно источника, и я продолжал ломать голову над тем, почемуutils
не было определено. В конце концов я обнаружил , что Webpack (довольно шустро) только включает в себя модуль , если его пространство имен раз ссылаются , по крайней мере. Поэтому, как только я сделал предисловие с одной из служебных функций целевого файлаutils
, модуль был включен.externals
вместо этого, если вам нужно создать глобальную переменную. Пример:externals: { 'webpackVariables': `{ serverUrl: '${ env.server }', cordovaBuild: '${ env.cordova }', }`, },
затем используйте это какconst webpackVariables = require('webpackVariables');
declare const isProduction: bool;
для справки, проверьте typescriptlang.org/docs/handbook/declaration-files/templates/…Я собирался задать тот же вопрос. После поиска немного дальше и decyphering части документации WebPack, я думаю , что то , что вы хотите , это
output.library
иoutput.libraryTarget
вwebpack.config.js
файл .Например:
JS / index.js:
webpack.config.js
Теперь, если вы свяжете сгенерированный
www/js/index.js
файл с тегом html-скрипта, вы сможете получить доступ к немуmyLibrary.foo
из любого другого скрипта.источник
export { foo }
вindex.js
?Используйте DefinePlugin .
Пример:
Использование:
источник
Вы можете использовать определить
window.myvar = {}
. Когда вы хотите использовать его, вы можете использовать какwindow.myvar = 1
источник
var window.CKEDITOR_BASEPATH = {};
ошибкой «Неожиданныйwindow.
var
ключевое слово.window.CKEDITOR_BASEPATH = {};
Я решил эту проблему, установив глобальные переменные в качестве статических свойств для классов, для которых они наиболее актуальны. В ES5 это выглядит так:
источник