1

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

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>

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

我得到的错误是：

inputBuilder.min.js:1 Uncaught ReferenceError: 要求未在 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

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

4

0 回答 0