目的: 让webpack打包的时候不打包node_modules中的react和react-dom, 那项目需要react和react-dom的时候去哪里找呢? 从全局变量找, 所以我们在index.html中引入react.development.js和react-dom.development.js
修改webpack配置
告诉webpack不要打包node_modules中的react, react-dom 承诺我们在全局变量中为它提供了React, ReactDOM
因为是用create-react-app创建的项目, 弹出配置使用如下命令
npm run reject
项目下多出config和public目录, 打开config目录下的webpack.config.js, performance 配置下添加externals配置如下
引入map文件
将如下的4个文件拷贝到public目录
注意是umd目录下面的文件而不是cjs
umd表示: Universal Module Definition, 同时兼容cjs和amd, 支持使用script的方式引入
cjs表示: CommonJS, 只能在NodeJS上运行, 使用require("module") 读取并加载模块
index.html 引入react.development.js, react-dom.development.js两个文件
文件引入后可以从调用堆栈看到, 文件信息映射到了react目录
接下来要让vscode能打开React项目源文件
vscode自动定位React源文件
1, 将测试项目react-app和clone下来的react项目放到同一个workspace下, 这里我只保留react源文件项目中的packages文件夹
2, 将2个map文件react.development.js, react-dom.development.js中的路径替换为当前workspace下的react/packages
替换后的效果, 注意使用绝对路径
最后, 点击堆栈, 点击源文件, vscode能自动定位到react的源代码目录了
