Question

我有一个 Project1 ，它通过webpack捆绑在一起。我的要求是将这个bundle.js放在CDN上，以便我可以在 Project2 中使用项目1中导出的模块。

项目1文件 - ＆gt;

Hello.jsx：

import React, { Component } from "react";

export default class Hello extends Component {

  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

index.js：

export {Hello} from "./src/Hello.jsx";

我正在创建一个名为 bundle.js 的软件包，出于演示目的，我只是复制这个 bundle.js （在同一个版本中），而不是将其添加到CDN中文件夹为App.jsx）并在 Project2 中引用它。

项目2文件 - ＆gt;

App.jsx：

import React, { Component } from "react";
import Hello from "./bundle.js";

export default class App extends Component {
    render() {
        return (
            <Hello/>
        );
    }
}

index.js：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from "./src/App.jsx";

ReactDOM.render(
    <App />,
    document.getElementById("root2")
);

的index.html：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>webpack 2 demo</title>
</head>

<body>
    <div id="root2">
    </div>
</body>

</html>

我正在尝试使用启用了HMR的webpack-dev-server运行 Project2 ，但它在Google Chrome控制台中出错：

警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

未捕获错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

当前版本的软件包：

＆＃34;反应＆＃34;：＆＃34; ^ 15.4.2＆＃34; ＆＃34; webpack＆＃34;：＆＃34; ^ 2.2.1＆＃34;，＆＃34; webpack-dev-server＆＃34;：＆＃34; ^ 2.4.2＆＃34;，＆＃34; babel-core＆＃34;：＆＃34; ^ 6.24.0＆＃34;

我是否以错误的方式进口？或者出口有什么问题吗？请帮忙。

编辑：将 Project1 的webpack.config.js添加为Joe Clay suggested：

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'umd',
    library: 'Hello'
  },
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ],
};

Answer 1

为此，您需要更新webpack配置以输出可以导出的包。

您的配置需要这些行

{
    output: {
        libraryTarget: 'umd', // make the bundle export
        externals: {
            'react': { // import react from an external module so you don't have multiple instances
                'commonjs': 'react', 
                'amd': 'react'
             },
            'react-dom': { // some versions of react had links to react-dom so its good to include this
                'commonjs': 'react-dom',
                'amd': 'react-dom'
            }
        }
    }
}

请务必注意，如果您在项目中使用create-react-app，则需要弹出子项目以更改配置

Answer 2

尝试

import {Hello} from "./bundle.js";

您没有导出Hello作为默认值。

export {Hello} from "./src/Hello.jsx";

Answer 3

本文帮助我创建了由webpack捆绑的可导入/可导出库。

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

您的webpack配置文件中需要以下内容：

output: {
    path: __dirname + '/lib',
    filename: outputFile,
    library: libraryName,    // very important line
    libraryTarget: 'umd',    // very important line
    umdNamedDefine: true     // very important line
  },

如何导入在webpack中创建的包？

3 个答案: