Skip to content

chore(build): switch to Webpack for ESM build #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: v5
Choose a base branch
from
+32 −1
Open

chore(build): switch to Webpack for ESM build #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/layout/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
"dev": "webpack --config webpack.dev.config.js --mode development",
"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",
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

你好，将 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 来专门生成声明文件。

Suggested change
"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",

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

在更新 build:esm 脚本的同时，ci 脚本似乎被意外移除了。这个脚本 (npm run build && npm run test) 对于在持续集成环境中验证构建和测试至关重要。如果移除不是故意的，建议通过下面的建议恢复它。

Suggested change
"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",

"build:umd": "webpack --config webpack.config.js --mode production",
"publish:alpha": "npm publish --tag alpha",
"test": "jest",
Expand Down
1 change: 1 addition & 0 deletions packages/layout/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": [],
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

你好，这里的 "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 文件。

"experimentalDecorators": false /* Enables experimental support for ES7 decorators. */,
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"downlevelIteration": true,
Expand Down
30 changes: 30 additions & 0 deletions packages/layout/webpack.esm.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const path = require("path");

module.exports = {
entry: "./src/bundle-entry.ts",
experiments: {
outputModule: true,
},
output: {
filename: "index.js",
publicPath: "",
path: path.resolve(__dirname, "lib"),
library: {
type: "module",
},
clean: true,
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
devtool: "source-map",
};
Loading