javascript - 无法请求 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 Uncaught Invariant Violation: 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 exports.

在调试时，果然，对 require 的调用给了我

Component = Object {}

如果我在将bundle.js复制到项目中后直接需要它，我会得到相同的结果，所以我觉得我一定没有以正确的方式设置我的构建和发布，经过一段时间的搜索，我无法找出我做错了什么。

Answer 1

当组件被分成自己的包时，您不应该将它们捆绑在一起。如果他们使用 ES6，最好使用 Babel 转译它们作为预发布步骤，但您不需要捆绑它们。

考虑一下捆绑步骤对您的组件做了什么。它会遍历您的入口点并将任何所需的依赖项拉入单个文件中。这意味着您的bundle.js 结果将包含所有react、react-dom 以及您从组件中需要的任何其他内容。

只有您的主应用程序(需要组件包)需要捆绑步骤。在这里，它将解决所有依赖项，包括嵌套的依赖项，并将它们一起拉入应用程序的 Bundle.js 中，确保您最终不会将诸如 React 之类的库的重复副本拉入应用程序。