不需要React组件

Question

我目前正在从一个整体的React项目中提取模块，以便可以将它们分别存储在我的npm注册表中，但是我似乎无法正确地导出和导入它们。 在尝试提取它们之前，我使用了：

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

并使用webpack捆绑所有内容。 很好。 然后，我将组件移至与Webpack捆绑在一起的单独项目。 我似乎无法使其作为npm依赖项工作。 这是该组件的基本代码：

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

构建过程将包输出到build / 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未捕获的不变变量：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。 检查exports的渲染方法。

而且当进行调试时，很确定，require的电话给了我

组件=对象{}

如果将其复制到项目中后直接需要bundle.js，我会得到相同的结果，所以我觉得我一定不能只是设置构建并发布正确的方式，而搜索了一段时间之后，我没有能够找出我做错了什么。

Answer 1

当组件分离到自己的程序包中时，不要捆绑它们。 如果他们使用的是ES6，则最好使用Babel作为预发布步骤来对它们进行转换，但是您无需捆绑它们。

考虑捆绑步骤对组件的作用。 它正在通过您的入口点，并将所有必需的依赖项拉入一个文件中。 这意味着您的bundle.js结果将提取所有的react，react-dom以及组件中所需的其他信息。

仅您的主应用程序（将需要组件包）需要捆绑步骤。 在这里，它将解析所有依赖项，包括嵌套的依赖项，并将它们拉到应用程序的bundle.js中，确保您最终不会像react一样被复制到应用程序库中。