如何使用 React 作为外部包

Question

我正在制作一个小应用程序，它将作为外部包包含在另一个更大的项目（我们称之为主项目）中。我为此使用 "Create React App"。

它工作正常，但我想构建我的应用程序而不将 React 包含到捆绑文件中，因为主项目也将 React 作为其他目的的依赖项。

现在我正在尝试下一步：

我的项目中有运行 "eject" 脚本，所以现在我可以访问 webpack 配置。

在 webpack.config.dev.js 文件中我添加了下一个属性:

externals: {
  react: {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react',
    umd: 'react',
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs2: 'react-dom',
    commonjs: 'react-dom',
    amd: 'react-dom',
    umd: 'react-dom',
  }
}

现在，据我所知，我需要将 React 和 ReactDom 添加到我的 index.html 中，它位于 public 文件夹中。

在正文标签中，我包含了来自 React CDN 的两个脚本：

https://reactjs.org/docs/cdn-links.html

但是当我运行 npm start 它不起作用并抛出错误：

Uncaught TypeError: Cannot read property 'Component' of undefined

如何配置 "Create React App" 以从捆绑包中排除 React？

谢谢！

Answer 1

试试这个：

externals: {
  react: 'React',
  'react-dom': 'ReactDOM'
}

另外，不要将它们添加到 body 标签中。将它们添加到头部。最后，它们必须添加到您的捆绑文件之前。

Answer 2

不要构建您的应用程序，将其传递给其他人并要求他将应用程序集成在一起，然后两个应用程序将使用相同的依赖项。如果您将构建您的应用程序，那么当第二个人再次构建应用程序时，您可能会使用相同的依赖项。您可以使用 Lerna 将应用程序分成多个模块。它将单独处理所有包，您可以将一个包导入另一个包，同时所有包都有其独立的依赖关系。

根据 Lerna

Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories gets complicated really fast.

如何使用 React 作为外部包

How to use React as external package

javascript

reactjs

create-react-app