Question

所以我创建了一个反应组件，它将以UMD格式部署，并可以从unpkg中使用。它是使用webpack构建的。

使用外部模块创建UMD模块的Webpack配置：

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'
    }
};

然后创建您可以看到的包here

我尝试使用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>

这应包括react，react-dom和我的组件，然后将其渲染到屏幕上。

我得到的错误是：

inputBuilder.min.js：1未捕获的ReferenceError：未定义require at Object.r。 extends.Object.setPrototypeOf .__ proto （inputBuilder.min.js：1）在e（inputBuilder.min.js：1）在对象。（inputBuilder.min.js：1）在e（inputBuilder.min.js：1） at i。 extends.Object.setPrototypeOf .__ proto （inputBuilder.min.js：1）在inputBuilder.min.js：1 在inputBuilder.min.js：1

要求不应该在浏览器中定义吗？为什么webpack会使用它呢？

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

0 个答案: