无法需要React组件

Question

我目前正在从整体React项目中提取模块，以便它们可以单独存储在我的npm注册表中，但我似乎无法正确导出和导入它们。试图提取他们之前，我用的是：

const Component = require("./component.js"); 

和使用的WebPack捆绑一切。这工作正常。然后，我将组件移至一个单独的项目中，该项目与webpack捆绑在一起。然而，我似乎无法让它作为一个npm的依赖。下面是该组件的基本代码：

// Some require statements 
... 
var Component = React.createClass({...}); 
module.exports = Component; 

构建过程输出束建/ bundle.js和的package.json看起来是这样的：

{ 
    "name": "component", 
    "version": "0.0.2", 
    "description": "...", 
    "main": "build/bundle.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build-dev": "webpack", 
    "build-min": "NODE_ENV=production webpack && uglifyjs ./build/bundle.js -c -m -o ./build/bundle.min.js --source-map ./build/bundle.min.js.map", 
    "prepublish": "npm run build-min" 
    }, 
    "publishConfig": { 
    "registry": "registry" 
    }, 
    "author": "esaron", 
    "license": "UNLICENSED", 
    "dependencies": { 
    ... 
    }, 
    "devDependencies": { 
    ... 
    } 
} 

而且我将其导入搭配：

const Component = require("component"); 

当我尝试加载网页，我在控制台看到以下错误：

bundle.js：1299未捕获的不变违例：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。检查exports的渲染方法。

当调试，果然，需要调用是给我

组件=对象{}

我得到相同的结果，如果我直接要求bundle.js在将其复制到项目中之后，我觉得我不应该设置我的构建并发布正确的方式，并且经过一段时间的搜索后，我无法找出我做错了什么。

Answer 1

当你的组件被分离出它们自己的包时，你不应该捆绑你的组件。如果他们使用ES6，那么使用Babel作为预发布步骤来传输它们是一个好主意，但您不需要捆绑它们。

想想你的组件对捆绑步骤做了什么。它正在通过你的入口点并将任何所需的依赖关系拉入单个文件。这意味着你的bundle.js结果将会吸引你所有的反应，反应，以及你需要的任何其他组件。

只有你的主应用程序（这将需要组件包）需要一个捆绑步骤。在这里，它将解析所有依赖关系，包括嵌套的依赖关系，并将它们一起放入应用程序的bundle.js中，确保您不会将重复副本的库（如反应）拖入应用程序。