chore(build): switch to Webpack for ESM build #250
Conversation
Summary of ChangesHello @yvonneyx, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在解决在使用 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
yvonneyx
changed the title
Summary of ChangesHello @yvonneyx, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在解决 ESM 构建中 Web Worker 文件定位不正确的问题。通过将 ESM 模块的打包方式从 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
你好，感谢你的贡献。这个 PR 将 ESM 的打包方式从 tsc 改为 webpack，以解决 Web Worker 资源路径的问题，这个方向是正确的。
但在实施中存在一些问题，可能会导致构建失败或产物不完整。我主要有以下几点反馈：
- CI 脚本移除：
package.json中ci脚本被移除了，这可能会影响 CI/CD 流程，需要确认是否是预期行为。 - 类型声明文件缺失：新的
build:esm脚本使用 Webpack，但没有配置生成 TypeScript 声明文件（.d.ts），这将导致库的用户无法获得类型提示。 - TypeScript 配置问题：
tsconfig.json的修改存在一些问题："types": []的设置会阻止 TypeScript 自动加载@types包，可能导致依赖的类型（如d3-force）丢失。- 为了正确处理
import.meta.url，TypeScript 的编译目标target需要设置为es2020或更高版本，当前的es6会导致编译失败。
- 构建配置优化：为了让不同的构建目标（如 UMD 和 ESM）可以有不同的编译选项，建议为 ESM 构建创建一个独立的
tsconfig.esm.json文件。
具体的修改建议请看我的评论。
| "build": "npm run clean && run-p build:*", | ||
| "ci": "npm run build && npm run test", | ||
| "build:esm": "tsc", | ||
| "build:esm": "webpack --config webpack.esm.config.js --mode production", |
There was a problem hiding this comment.
你好，将 build:esm 从 tsc 切换到 webpack 会导致 TypeScript 的声明文件（.d.ts）无法生成。ts-loader 在 Webpack 中默认不会生成声明文件，即使 tsconfig.json 中设置了 "declaration": true。
这将导致 package.json 中的 "types": "lib/index.d.ts" 字段指向一个不存在的文件，从而破坏使用这个包的 TypeScript 项目的类型推断。
为了解决这个问题，你需要一个额外的步骤来生成声明文件。一个常见的做法是修改 build:esm 脚本，在 Webpack 打包之后再运行一次 tsc 来专门生成声明文件。
| "build:esm": "webpack --config webpack.esm.config.js --mode production", | |
| "build:esm": "webpack --config webpack.esm.config.js --mode production && tsc --project tsconfig.json --emitDeclarationOnly", |
| "resolveJsonModule": true, | ||
| "esModuleInterop": true, | ||
| "lib": ["esnext", "dom"], | ||
| "types": [], |
There was a problem hiding this comment.
你好，这里的 "types": [] 配置会阻止 TypeScript 自动加载 node_modules/@types 中的类型定义。这可能会导致项目中依赖的类型（例如 @types/d3-force, @types/dagre 等）无法被识别，从而引发编译错误。建议移除这一行，让 TypeScript 自动发现类型。如果确实需要精确控制，你应该在这里列出所有需要的类型包。
另外，还有一个与新 Webpack 构建相关的重要问题：为了让 Webpack 正确处理 import.meta.url（这是本次修改的核心目的），TypeScript 的编译目标 compilerOptions.target 需要设置为 es2020 或更高版本。当前 tsconfig.json 中的 "target": "es6" 不支持 import.meta 语法，会导致 ts-loader 编译失败。
关于如何修改 target 而不影响其他构建，请参考我对 webpack.esm.config.js 文件的评论，其中建议为 ESM 构建创建一个专用的 tsconfig 文件。
There was a problem hiding this comment.
Code Review
这个 PR 将 ESM 的打包方式从 tsc 切换到了 Webpack，以解决 Web Worker 文件无法正确定位的问题。这是一个合理的改动，因为 Webpack 在处理资源依赖（如 Worker）方面比 tsc 更强大。新的 webpack.esm.config.js 配置看起来是正确的，它使用了 Webpack 5 的功能来输出 ES 模块。tsconfig.json 中添加 "types": [] 也是一个良好的实践，可以避免全局类型污染。
我发现了一个潜在问题：package.json 中移除了 ci 脚本。这可能会影响持续集成流程，建议确认这是否是预期行为。
| "build": "npm run clean && run-p build:*", | ||
| "ci": "npm run build && npm run test", | ||
| "build:esm": "tsc", | ||
| "build:esm": "webpack --config webpack.esm.config.js --mode production", |
There was a problem hiding this comment.
在更新 build:esm 脚本的同时，ci 脚本似乎被意外移除了。这个脚本 (npm run build && npm run test) 对于在持续集成环境中验证构建和测试至关重要。如果移除不是故意的，建议通过下面的建议恢复它。
| "build:esm": "webpack --config webpack.esm.config.js --mode production", | |
| "ci": "npm run build && npm run test", | |
| "build:esm": "webpack --config webpack.esm.config.js --mode production", |
yvonneyx
force-pushed
the
fix/esm-webworker
branch
from
5cd2b3f to
a08a493
Compare
|
可以试试 utoo，不过 1122 开源，应该有 beta 版本。 |
在使用
tsc打包 ESM 时，worker文件没有被正确定位，Web Worker 处于不可用状态。UMD 用的 webpack 打包，功能正常可用。分析下来，
tsc仅做类型编译和文件转换，不会处理import.meta.url或内联的 Worker 资源路径，因此无法生成独立的 worker bundle。这里把 ESM 的打包方式也改成 webpack。