Closed stormslowly closed 1 month ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
此次更改主要涉及对文件的导入和导出声明的修改以及对构建功能的调整。新增了对.less
文件的导入,导出了相关样式对象,并引入了动态导入功能。此外,构建功能现在支持对.less
、.scss
和.sass
文件的映射处理。
文件路径 | 变更摘要 |
---|---|
packages/preset-umi/fixtures/prepare-build/normal/bar/bar.less |
新增了定义文本颜色为红色的.bar 类。 |
packages/preset-umi/fixtures/prepare-build/normal/bar/bar.tsx |
新增了对bar.less 的导入,并导出了styles 对象。 |
packages/preset-umi/fixtures/prepare-build/normal/context/context.ts |
新增了异步函数load(x: string) ,用于动态导入模块。 |
packages/preset-umi/fixtures/prepare-build/normal/index.ts |
新增了对load 函数的导入。 |
packages/preset-umi/src/features/prepare/build.ts |
在build 功能中添加了对.less 、.scss 和.sass 文件扩展名的映射处理。 |
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
在代码的世界里, 新增了色彩的魔法, 动态导入如风般轻盈, 构建功能更显强大。 小兔子欢快地跳跃, 代码如诗般流淌。
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?
Size Change: +139 B (0%)
Total Size: 9.9 MB
Filename | Size | Change | |
---|---|---|---|
./packages/preset-umi/dist/features/prepare/build.js |
1.7 kB | +139 B (+8.88%) | 🔍 |
problem
发生条件,dynamic import + context module![image](https://github.com/umijs/umi/assets/415655/cbe12156-aaf0-442d-909c-95429b378980)
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
文件扩展名的映射,防止构建时出现空文件错误。