如何在 Void 中重新编译 React UI 层并正确命名外部导入【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/voidVoid 的 React UI 层侧边栏、设置、Quick Edit、diff 视图等组件位于 src/vs/workbench/contrib/void/browser/react 目录。修改这里的.tsx源码后需要重新编译才能生效编译产物会输出到同目录下的out/。本文说明如何执行这次编译以及外部导入的命名规则——导入路径没写对时报错很难追踪这是该目录文档里特别强调的坑。前提条件环境需要能运行node且能通过npx调用scope-tailwind、tsup、nodemon构建脚本全部通过npx拉起这些工具。所有命令都在src/vs/workbench/contrib/void/browser/react/目录下执行因为 README 中的node build.js是相对于该目录的。执行编译node build.js进入该目录后运行一次完整构建node build.js根据 build.js 的构建模式这条命令按顺序做两件事运行npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p void-从src/生成src2/目录运行npx tsup按 tsup.config.js 的配置把src2/下的入口编译成 ESM 产物输出到out/。构建结束时终端会打印✅ Build complete!build.js 中的成功提示产物目录为out/README 明确说 compile the React intoout/。可选watch 模式持续编译开发时可以用 watch 模式代替反复手动构建node build.js --watch-w是等效的简写。watch 模式的实际行为见 build.js如果src2/还不存在先执行一次初始 scope-tailwind 构建创建它用nodemon监视src/下的ts,tsx,css文件变化时重跑npx scope-tailwind ./src -o src2/ -s void-scope -c styles.css -p void-同时用npx tsup --watch持续编译输出前缀分别为[scope-tailwind]和[tsup]输出中提到styles.css时脚本会延迟 6 秒强制重写一次src2/styles.cssbuild.js 注释说明这是 hack to refresh styles automatically用于让样式自动刷新。两个 watcher 都用 CtrlC 停止。正确命名外部导入这条规则直接决定构建能否按预期工作README 原文是Make sure to add .js at the end of any external imports used in here, e.g.../../../../../my_file.js. If you dont do this, you will get untraceable errors.原因在 tsup.config.js 的 external 判定上noExternal配置为/^(?!\.).*$/即所有不以.开头的包名如react都会被打包进产物而不是保留为外部依赖external配置为正则../../../*.js即相对路径回退到上层、以.js结尾的导入会被保留为外部引用不重复实现只是作为优化避免产物文件里再拷贝一份函数。也就是说想让某个相对导入保持外部不打包进out/的产物导入路径必须以.js结尾且匹配../../..这种相对形式。漏掉.js后缀时构建不会给出清晰的报错README 用 untraceable errors 描述这种失败现象——如果你发现运行时报错但构建本身没有明显失败优先检查导入是否带.js后缀。src/ 目录必须保持浅层README 的第二条规则src/ needs to be shallow (1 folder deep) so the detection of externals works properly (see tsup.config.js).src/下的组件目录如sidebar-tsx/、void-settings-tsx/、quick-edit-tsx/只允许一层文件夹深。原因是 external 正则固定为../../../*.js恰好回退三层源码文件位于src/组件目录/内时../../..正好回到 react 目录这一层。把文件再嵌套一层相对导入就无法命中 external 正则外部判定会失效。所以新增组件文件时保持在src/下一层组件目录内即可不要再往下建子目录。结果验证与已知限制验证编译是否成功看两点node build.js结束时打印✅ Build complete!且out/下生成了产物。tsup 配置中outbase: src2输出目录结构从src2开始保持层级编译产物只包含src2/下各组件目录的index.tsx入口void-editor-widgets-tsx、sidebar-tsx、void-settings-tsx、void-tooltip、void-onboarding、quick-edit-tsx、diff其余文件不会成为独立入口。配置层面的已知限制均来自 tsup.config.js产物格式固定为 ESMformat: [esm]splitting: false平台目标为浏览器platform: browsertreeshake: trueinjectStyle: true即 CSS 会被打进输出文件入口指向的是src2/scope-tailwind 的生成产物所以不能跳过第一步直接跑 tsup——src2/不存在或过期时应先执行一次完整node build.js让它重新生成clean: falseout/不会被自动清空旧产物文件可能与当前源码并存。如果改动后out/里没有对应变化检查顺序就是构建是否报untraceable errors回到导入后缀问题→src/是否被嵌套得过深external 判定失效→ watch 模式下 nodemon/tsup 的输出是否正常滚动。【免费下载链接】void开源AI代码编辑器Cursor的替代方案。项目地址: https://gitcode.com/GitHub_Trending/void2/void创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考