反应- prod- source映射
用 ReactDOM 制作的原始代码来更新app sourcemaps 的工具建立 .
背景情况
反应从未运出任何生产过程中的源图 建造出文物。 这使得生产中React内部无法有意义地调试出错误. React的源代码在原始形式上已经难以理解了 - 尝试弄清楚当您只有单字符可变名称时会发生什么,没有评论是 无法。 。 。 .
2023年,我提交了一个反应PR at https://github.com/facebook/react/pull/26446 页面存档备份,存于互联网档案馆 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}这个更新的React的建造管道 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}生成生产文物的源图 它最终被合并,后又被恢复. 相反,"回想"19号将携带优化而未变质的活化文物出航. 这意味着应用程序的构建步骤会将React所生的活化出自己,因此React的源会被调试.
不过,这无助于调试 当前 反应的版本.
我做了一些工作来检查 早期的React版本的被标记的源代码, 在当地重建这些版本, 并核实这些文物是相同的字节。 然后把建造管道的改变 从公关转到那些 旧的退货版本 并建立了源图 将 已经为每个版本生成.
这里可以看到实际使用的构建变化:
- https://github.com/facebook/react/compare/v18.2.0.... replayio:react:feature/react-sourcemaps-18.2.0
目录
该套件包括:
- 实际来源图
- 通过内容散列搜索特定 React 和 ReactDOM prod 的输入源图的逻辑,并通过源图以“ 原始的” 预密接源替换
- 一个将装入给定输入源图文件并重写它的 CLI 工具
- 一个将自动替换应用程序捆绑中发现的 React 包源图的构建工具插件
反应版本
此软件包目前包含针对这些版本的回放和回放DOM的源图 :
- 18.3.1 国家
- 18.3.0 (单位:千美元)
- 18.2.0 (中文(简体) )
- 18.1.0 (中文(简体) )
- 18.0.0 (单位:千美元)
- 17.0.2 (韩语)
- 17.0.1 (中文(简体) )
- 17.0.0 (单位:千美元)
CLI 使用量
yarn add @acemarke/react-prod-sourcemaps
./node_modules/.bin/react-prod-sourcemaps --inputFile path/to/your/appBuild/sourcemap.js.map
# Output file will currently be written to sourcemap.remapped.js.map
构建插件使用
构建插件使用 无插件,意味着我们目前支持网络包装,建设,滚出,活字和rspack(实验性).
插件支持以下选项:
| 键 | 价值 | 所需经费 | 默认 | 建议 | 函数 |
|---|---|---|---|---|---|
| 调试 | 布尔 | 没有 | 虚假 | 虚假 | 启用调试日志 |
| 保护 | 布尔 | 没有 | 虚假 | 虚假 | 在路径/到/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站/出站后保存原始出站出站出站出站出站出站出站出站 |
| 模式 | "严格" | 没有 | 未定义 | "严格" | 如果构建工具没有生成源映射文件, 则会让构建插件丢出错误 |
3⁄4 ̄ ̧漯B:如果源映射生成没有被您的构建工具所启用(或者它没有正确的设置),插件将默默地失败而不会执行任何源映射再映射. 我们建议使用模式设置 : “ 严格 ” , 以防您想要插件在此情况下出错 .
网页包 :
import { WebpackReactSourcemapsPlugin } from "@acemarke/react-prod-sourcemaps";
module.exports = {
// ...webpack config
devtool: "source-map", // or any other option that generates separate .map.js files
plugins: [WebpackReactSourcemapsPlugin({ debug: false, preserve: false })],
};
兴建 :
import { EsbuildReactSourcemapsPlugin } from "@acemarke/react-prod-sourcemaps";
esbuild.build({
// ...esbuild config
sourcemap: true, // or any other option that generates separate .map.js files
plugins: [EsbuildReactSourcemapsPlugin({ debug: false, preserve: false })],
});
滚动 :
import { RollupReactSourcemapsPlugin } from "@acemarke/react-prod-sourcemaps";
rollup({
// ...rollup config
output: {
sourcemap: true, // or any other option that generates separate .map.js files
},
plugins: [RollupReactSourcemapsPlugin({ debug: false, preserve: false })],
});
维特:
import { ViteReactSourcemapsPlugin } from "@acemarke/react-prod-sourcemaps";
vite.build({
// ...vite config
build: {
sourcemap: true, // or any other option that generates separate .map.js files
},
plugins: [ViteReactSourcemapsPlugin({ debug: false, preserve: false })],
});
未来计划
- 为更多反应版本添加源图
- 向 CLI 工具添加更多选项 :
- 文件夹中的 Glob 源图
- 覆盖原始源图路径