如何使用本地 npm 包中的 React 组件

Question

我正在尝试使用一些 React 组件创建一个 npm 包，我几乎将其用于所有项目。这是文件夹结构和文件内容：

• /
  • 距离/
    • bundle.js
  • src/
    • MyComponent.jsx
    • index.js
  • package.json
  • webpack.config.js

MyComponent.jsx

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <p>Hello, world!</p>
        );
    }
}

export default MyComponent;

index.js

// eventually there will be more components imported/exported here
import MyComponent from './MyComponent.jsx';
exports.MyComponent = MyComponent;

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    // some loaders...
};

package.json

{
    "name": "my-library",
    "files": [
        "dist",
        "src"
    ],
    "main": "dist/bundle.js",
    // the usual stuff...
}

这是我对这个过程的理解。首先，我使用 webpack 构建 src 文件。它查看 /src/index.js，导入 MyComponent 类，然后导出它，使其可用作 MyComponent。这些都被添加到 /dist 中的 bundle.js 文件中。

接下来，我用

npm pack

打包模块。这将创建一个存档文件，其中包含 /src 和 /dist 目录。

然后我转到我的其他项目并运行

npm install ../path/to/archive/file

。这会将模块添加到我的 node_modules 目录中。问题是当我尝试导入和使用 MyComponent 时...

import React, { Component } from 'react';
import MyComponent from 'my-library';

class App extends Component {
    render() {
        console.log(<MyComponent />);
        return (
            <MyComponent />
        );
    }
}

export default App;

...并渲染该组件，我收到此警告和错误：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `App`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

console.log 的输出是一个 React 对象，但类型是

Object

，这似乎是警告所暗示的内容（我猜它应该是一个字符串）。

知道我错过了什么吗？

---

编辑：

嗯，我更接近了。我在 webpack 配置中添加了库选项：

output: {
    library: 'my-library',
    libraryTarget: 'umd'
}

...然后我就可以像这样使用该组件了：

import MyLibrary from 'my-library';
const MyComponent = MyLibrary.MyComponent;

但我不想对每个组件都这样做。我的目标是这样的：

import { MyComponent, MyOtherComponent } from 'my-library';

Answer 1

您必须从组件index.js 文件中导出组件，如下所示

import MyComponent from './MyComponent.jsx';
import MyOtherComponent from './MyOtherComponent.jsx';
export {
    MyComponent,
    MyOtherComponent
}

然后在您的主项目中，使用导入它们

import { MyComponent, MyOtherComponent } from 'my-library';