Как импортировать реагирующий компонент через тег HTML-скрипта?
Поэтому я создаю компонент реагирования, который будет развернут в формате UMD и может использоваться из unpkg. Он построен с использованием веб-пакета.
Конфигурация Webpack для создания модуля UMD с внешними модулями:
module.exports = {
plugins: [
new StyleLintPlugin(),
new CleanWebpackPlugin(['../dist']),
new ExtractTextPlugin("index.css")
],
resolve:{
extensions: ["",".scss", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
preLoaders: [
{
test: /\.tsx$/,
loader: 'tslint-loader'
}
],
loaders: [
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("css-loader!postcss-loader!sass-loader")},
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader!postcss-loader")},
{ test: /\.tsx?$/, loader: "awesome-typescript-loader",exclude: /node_modules/,query:{declaration:false} },
{
test: /\.(png|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader',
}
]
},
devtool: 'source-map',
output: {
filename: '[name].js',
path: path.resolve(__dirname,"..", 'dist'),
library: 'productupload',
libraryTarget: 'umd',
umdNamedDefine: true,
//publicPath: '/'
}
externals: {
'react': 'commonjs react',
'react-dom':'commonjs react-dom',
'mongodb':'commonjs mongodb',
'express':'commonjs express'
}
};
Затем создается пакет, который вы можете увидеть здесь
И я пытаюсь получить компонент реагирования с HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload Component</title>
<meta name="description" content="It will upload generic product data to server.">
<meta name="author" content="Alexander Morton">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/@mortonprod/product-upload@1.0.1/dist/inputBuilder.min.js"></script>
</head>
<body>
<div id="root"></div>
<section>
</section>
<footer>
Product Upload component create by Alexander Morton
</footer>
<script>window.__IDS__ = ${ids}</script>
<script src= ${options.unpkgUI}></script>
<script type="text/babel">
ReactDOM.render(
<InputBuilder/>,
document.getElementById('root')
);
</script>
</body>
</html>
Это должно включать в себя реагирование, реакцию-дом и мой компонент, а затем отображать его на экране.
Я получаю ошибку:
inputBuilder.min.js:1 Uncaught ReferenceError: require не определен в Object.r. extends.Object.setPrototypeOf.__ proto (inputBuilder.min.js:1) в e (inputBuilder.min.js:1) в Object. (inputBuilder.min.js:1) в e (inputBuilder.min.js:1) в i. extends.Object.setPrototypeOf.__ proto (inputBuilder.min.js:1) в inputBuilder.min.js:1 в inputBuilder.min.js:1
Требование не должно быть определено в браузере правильно? Почему веб-пакет использует его тогда?