javascript - 如何使用 React 作为外部包

Question

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

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

现在我正在尝试下一步:

1. 我已经在我的项目上运行了“弹出”脚本，所以现在我可以访问 webpack 配置。

2. 在 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',
     }
   }
   

3. 现在，据我所知，我需要将 React 和 ReactDom 包含到我的公用文件夹中的 index.html 中。

在 body 标签中，我包含了来自 React CDN 的两个脚本:

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

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

Uncaught TypeError: Cannot read property 'Component' of undefined

如何配置“Create React App”以从 bundle 中排除 React？

谢谢!

Answer 1

试试这个:

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

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