Javascript 如何通过HTML脚本标记导入react组件？_Javascript_Reactjs_Npm_Webpack_Unpkg

Javascript 如何通过HTML脚本标记导入react组件？

javascript reactjs npm webpack

Javascript 如何通过HTML脚本标记导入react组件？,javascript,reactjs,npm,webpack,unpkg,Javascript,Reactjs,Npm,Webpack,Unpkg,因此，我正在创建一个react组件，它将以UMD格式部署，并且可以从unpkg中使用。它是使用webpack构建的使用外部模块创建UMD模块的网页包配置： module.exports = { plugins: [ new StyleLintPlugin(), new CleanWebpackPlugin(['../dist']), new ExtractTextPlugin("index.css")

因此，我正在创建一个react组件，它将以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获取react组件：

            <!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>


上载组件
Alexander Morton创建的产品上载组件
窗口。\uuuu id\uuuu=${IDS}
ReactDOM.render(
,
document.getElementById（'root'））
);

这应该包括react、react dom和my组件，然后将其呈现到屏幕上

我得到的错误是：

inputBuilder.min.js:1未捕获引用错误：未定义require 在Object.r.扩展.Object.setPrototypeOf.\uu proto（inputBuilder.min.js:1）在e（inputBuilder.min.js:1）反对。（inputBuilder.min.js:1）在e（inputBuilder.min.js:1） at i.扩展.Object.setPrototypeOf.\uu proto（inputBuilder.min.js:1）在inputBuilder.min.js:1 在inputBuilder.min.js:1

不应在浏览器中定义Require，对吗？那么为什么webpack会使用它呢？

看起来很难做到。您是被迫使用UMD部署它的吗？不是，但我认为UMD应该在浏览器上工作。对吗？看起来很难做。您是被迫使用UMD部署它的吗？不是，但我认为UMD应该在浏览器上工作。对吗？