如何将React作为外部包使用？Create React App打包排除React配置问询

嘿，我刚好处理过一模一样的需求——给主项目做嵌入的React小应用，不想重复打包React对吧？其实核心就是告诉webpack把React和ReactDOM当成外部依赖，别把它们塞进你的bundle里，直接用主项目已经加载好的版本。给你一步步来：

1. 修改Webpack配置文件（开发+生产环境都要改） #

你已经eject了，所以能拿到webpack.config.dev.js和webpack.config.prod.js这两个文件。咱们需要在这两个文件里添加/修改externals配置项：

找到配置文件里的externals字段（如果没有就直接加在和module同级的位置），添加以下内容：

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

这里的逻辑是啥？ #

这段配置告诉webpack：当你的代码里出现import React from 'react'或者import ReactDOM from 'react-dom'时，不要把React/ReactDOM的代码打包进你的bundle，而是去全局环境中找名为React和ReactDOM的变量——而主项目已经加载了React，全局环境里自然会有这两个变量，完美复用！

2. 确保主项目的加载顺序 #

要注意：主项目必须在你的嵌入应用之前加载React和ReactDOM。如果主项目是通过CDN加载的，那要确保CDN脚本在你的应用脚本之前；如果主项目也是webpack打包的，只要它已经把React打包进去（或者同样设为外部依赖），你的应用就能正常获取到全局变量。

3. 验证效果 #

运行npm run build之后，你会发现生成的bundle文件大小明显缩水——毕竟排除了React这个大块头。也可以打开bundle文件搜一下React，你会看到它只是引用全局变量，而不是包含整个React库的代码。

几个额外提醒 #

• 版本兼容性：你的小应用用的React版本必须和主项目的版本兼容！比如主项目用React 17，你就别在小应用里用React 18的新特性，不然很容易出奇怪的运行时错误。
• 如果主项目用模块联邦或者其他方式：如果主项目不是通过全局变量提供React，你也可以调整externals的写法，比如用CommonJS或者ES模块的配置，但浏览器环境下全局变量是最直接的方案。

内容的提问来源于stack exchange，提问作者Alexey Rozumovsky