fix(prepare): dynamic import need less loader with esbuild 0.21.x #12431
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
Walkthrough此次更改主要涉及对文件的导入和导出声明的修改以及对构建功能的调整。新增了对 Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant User
participant BarComponent
participant ContextModule
participant BuildFunction
User->>BarComponent: Import bar.tsx
BarComponent->>BarComponent: Import bar.less
BarComponent->>User: Export styles and bar
User->>ContextModule: Call load(x)
ContextModule->>ContextModule: Dynamically import module based on x
ContextModule->>User: Return imported module
User->>BuildFunction: Call build(opts)
BuildFunction->>BuildFunction: Map .less, .scss, .sass to 'empty'
BuildFunction->>User: Complete build process
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
Size Change: +139 B (0%) Total Size: 9.9 MB
ℹ️ View Unchanged
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (4)
packages/preset-umi/src/features/prepare/build.ts (4)
Line range hint
8-8: 建议使用node:协议导入Node.js内置模块，以符合最新的Node.js模块加载标准。- import path from 'path'; + import path from 'node:path';
Line range hint
19-19: 请避免使用any类型，尽可能指定更具体的类型，以增强类型安全性和代码可维护性。
Line range hint
66-66: 避免使用非空断言，这可能会导致运行时错误。请确保变量在使用前已被正确赋值或进行了适当的空值检查。
Line range hint
79-83: 此else子句可以省略，因为前面的分支已经提前结束了代码执行。- else { - const result = await esbuild.build(buildOptions); - return [result, undefined]; - } + const result = await esbuild.build(buildOptions); + return [result, undefined];
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- packages/preset-umi/fixtures/prepare-build/normal/bar/bar.less (1 hunks)
- packages/preset-umi/fixtures/prepare-build/normal/bar/bar.tsx (1 hunks)
- packages/preset-umi/fixtures/prepare-build/normal/context/context.ts (1 hunks)
- packages/preset-umi/fixtures/prepare-build/normal/context/qux.ts (1 hunks)
- packages/preset-umi/fixtures/prepare-build/normal/index.ts (1 hunks)
- packages/preset-umi/src/features/prepare/build.ts (1 hunks)
Files skipped from review due to trivial changes (3)
- packages/preset-umi/fixtures/prepare-build/normal/bar/bar.less
- packages/preset-umi/fixtures/prepare-build/normal/bar/bar.tsx
- packages/preset-umi/fixtures/prepare-build/normal/context/qux.ts
Additional context used
Biome
packages/preset-umi/src/features/prepare/build.ts
[error] 8-8: A Node.js builtin module should be imported with the node: protocol.
[error] 19-19: Unexpected any. Specify a different type.
[error] 66-66: Forbidden non-null assertion.
[error] 79-83: This else clause can be omitted because previous branches break early.
[error] 1-6: Some named imports are only used as types.
Additional comments not posted (3)
packages/preset-umi/fixtures/prepare-build/normal/context/context.ts (1)
1-4: 请确保动态导入的路径参数已经过适当的清理和验证，以防止潜在的安全风险。packages/preset-umi/fixtures/prepare-build/normal/index.ts (1)
12-12: 导入语句正确无误。建议检查整个项目中load函数的使用情况，确保其符合预期的功能。packages/preset-umi/src/features/prepare/build.ts (1)
38-40: 添加了对.less、.scss和.sass文件的处理，将它们设置为'empty'，这有助于解决动态导入中的问题。请确保这些设置不会影响其他构建过程。
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (5)
packages/preset-umi/src/features/prepare/build.ts (5)
Line range hint
8-8: 请使用node:协议导入 Node.js 内置模块。- import path from 'path'; + import path from 'node:path';
Line range hint
19-19: 请指定一个更具体的类型，而不是使用any。- config: { alias?: any; cwd: string }; + config: { alias?: Record<string, string>; cwd: string };
Line range hint
64-64: 避免使用非空断言。- opts.watch.onRebuildSuccess({ result: result! }); + if (result) opts.watch.onRebuildSuccess({ result });
Line range hint
77-82: 此else子句可以省略，因为前面的分支已经提前结束。- } else { - const result = await esbuild.build(buildOptions); - return [result, undefined]; - }
Line range hint
1-6: 一些命名导入仅用作类型，请考虑只导入它们需要的部分。- import esbuild, { + import type esbuild, { BuildContext, BuildOptions, BuildResult, } from '@umijs/bundler-utils/compiled/esbuild';
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/preset-umi/src/features/prepare/build.ts (2 hunks)
Additional context used
Biome
packages/preset-umi/src/features/prepare/build.ts
[error] 8-8: A Node.js builtin module should be imported with the node: protocol.
[error] 19-19: Unexpected any. Specify a different type.
[error] 64-64: Forbidden non-null assertion.
[error] 77-82: This else clause can be omitted because previous branches break early.
[error] 1-6: Some named imports are only used as types.
Additional comments not posted (1)
packages/preset-umi/src/features/prepare/build.ts (1)
82-111: 映射文件扩展名到 'empty' 加载器的逻辑正确。
sorrycc
approved these changes
Jun 3, 2024
sorrycc
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
problem
发生条件，dynamic import + context module
prepare 阶段
升级之前 umi 用的 esbuild 不处理 context module e.g:
import(`./{file}`)，只是保留这部分代码升级后 esbuild 支持了 context module，就会去解析 file 对应的文件，如果目录下恰好有非 ts js 文件，loader 就会失败。
solution
添加目前已知的 umi 项目可能遇到的文件为 empty loader
workaround
如果上述后缀还不够
import(`./{file}`)==>import(`./{file}.ts`)举例：
import(`./{file}`)=>import(`./{file}-proyx.ts`)Summary by CodeRabbit
新功能
bar.less，定义了一个文字颜色为红色的.bar类。bar.less的引用，并导出了styles对象。load(x: string)，可以根据输入字符串动态导入模块。修复
.less、.scss和.sass文件扩展名的映射，防止构建时出现空文件错误。