Сегодня я заметил что-то странное при использовании веб-пакета, и DefinePlugin.
Допустим, мой webpack.config.js содержит следующее:
new webpack.DefinePlugin({
'foo.bar': JSON.stringify('hello world'),
'baz': JSON.stringify({bar: 'I am in baz.bar'}),
})
И мой global-environment.ts:
declare var foo: object
declare var baz: object
Теперь я делаю это на своем основном файле сценария:
console.log(foo.bar) // hello world
console.log(foo['bar']) // hello world
console.log(baz.bar) // I am in baz.bar
console.log(baz['bar']) // I am in baz.bar
И все работает хорошо, но теперь начинается самое интересное:
console.log(foo) // ReferenceError: foo is not defined
console.log(baz) // { bar: 15 }
Почему этодумаю, что foo не определено, но я действительно могу получить доступ к bar через . и []?
Мое первоначальное подозрение было, что это было нечто похожее на то, когда один использует объект в качестве ключа для другогообъект и он приводит к строке:
const a = {}
const b = {}
const b[a] = 15 // {'[object Object]': 15}
Так что foo.bar будет эквивалентно чему-то вроде globals['foo.bar'], и тогда будет иметь смысл, что один foo будет неопределенным и foo[bar] тоже.За исключением случаев, когда вы упоминаете выше, вы можете использовать foo.bar и foo['bar'] как обычно, как если бы foo был обычным объектом.
Что здесь происходит?