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

Question

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

/

分布/

bundle.js

源/

我的组件.jsx

index.js

包.json

webpack.config.js

我的组件.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...
};

包.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';