Question

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

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

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

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

构建过程将bundle输出到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：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。检查exports的呈现方法。

调试时，肯定的是，对require的调用给了我

Component = Object {}

如果我将bundle.js复制到项目后直接需要bundle.js，我会得到相同的结果，所以我觉得我必须不是设置我的构建并以正确的方式发布，并且在搜索了一段时间后，我我无法找出我做错了什么。

Answer 1

当组件分离到自己的包中时，不应捆绑它们。如果他们使用ES6，使用Babel作为预发布步骤来转换它们是一个好主意，但您不需要捆绑它们。

考虑捆绑步骤对组件的影响。它正在通过您的入口点并将任何所需的依赖项拉入单个文件中。这意味着你的bundle.js结果将包含所有的反应，反应和你需要的任何组件。

只有您的主应用程序（需要组件包）才需要捆绑步骤。在这里，它将解析所有依赖项，包括嵌套的依赖项，并将它们组合到您的应用程序的bundle.js中，确保您不会最终获得库的重复副本，例如将反应拉入您的应用程序。

无法使用React组件

1 个答案: