Мне известно, что пакеты, скомпилированные с помощью веб-пакета, не записывают в глобальное пространство имен.
Но лучше всего импортировать вещи, скомпилированные с помощью веб-пакета (например, vendor.js, созданный splitChunksв проект без веб-пакета?У меня есть какой-то старый бэкэнд-код, который создает html-файл построчно.Там я хочу включить и повторно использовать некоторые новые компоненты пользовательского интерфейса, которые в комплекте.Кроме того, в конфигурации веб-пакета у меня есть некоторые унаследованные глобальные функции (например, «GlobalFunction»), объявленные с помощью плагина ProvidePlugin.
<html>
<body>
<div id="everything" class="everything">
<script src="vendor.bundle.js"></script>
<script src="commons.bundle.js"></script>
<script src="app.bundle.js"></script>
<script>
GlobalFunction();
ReactDOM.render(
React.createElement(Component1, {
prop1: '1',
prop2: '2',
}, null),
document.getElementById('mainbody')
);
</script>
</div>
<div id='mainbody'>
<!--- rendered by react -->
</div>
</body>
</html>
Таким образом, проблема заключается в том, что GlobalFunction и ReactDOM не известны и поэтому выдают ошибку «не определено».Конечно, когда я вместо этого получаю ReactDOM из CDN, например
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
ReactDOM правильно находится в контексте, но Component1 (определяемый в app.bundle.js) тогда не известен.
ниже только для справки:
app.js (правильно выставлен)
export class Component1 extends React.Component {
...
}
webpack.conf Вот как были скомпилированы пакеты(не уверен насчет опции libraryTarget).Веб-пакет не используется для этого проекта.
//...
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: "all",
name: "vendor",
priority: 10,
enforce: true
},
commons: {
chunks: "initial",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
}
},
},
},
//...
output: {
path: path.resolve(__dirname, '..', '/dist'),
filename: '[name].bundle.js',
libraryTarget: 'commonjs2',
},
//...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
GlobalFunction: ['../global.js', 'doGlobalFunction'],
})
]
спасибо заранее!
ОБНОВЛЕНИЕ
Я пробовал следующие два, но все еще безуспешно
webpack.conf (представляю библиотеку "testLib", так что, надеюсь, я смогу получить к ней доступ вне контекста веб-пакета и записать глобальную функцию также в окно.
//...
output: {
path: path.resolve(__dirname, '..', 'ui/ext/static/dist'),
filename: '[name].bundle.js',
libraryTarget: 'var',
library:'testLib'
},
//...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery",
GlobalFunction: ['../global.js', 'doGlobalFunction'],
"window.GlobalFunction" : ['../global.js', 'doGlobalFunction']
})
]
к сожалению, у меня не было доступа к GlobalFunction, а также нет доступа к testLib