如何從本地npm包使用React組件

Question

我正在嘗試創建一個npm包，其中包含幾乎所有我的項目都使用的React組件。這裏的文件夾結構和文件內容：

• /
  • DIST/
    • bundle.js
  • 的src/
    • MyComponent.jsx
    • 指數.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`. 

控制檯的輸出。日誌是一個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';