-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add new
source.assetsInclude
config (#3808)
- Loading branch information
1 parent
ed69518
commit 14a7c71
Showing
9 changed files
with
217 additions
and
2 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import path from 'node:path'; | ||
import { build } from '@e2e/helper'; | ||
import { expect, test } from '@playwright/test'; | ||
|
||
function isIncludeFile(filenames: string[], includeFilename: string) { | ||
return filenames.some((filename) => filename.includes(includeFilename)); | ||
} | ||
|
||
test('should allow to configure additional assets and match by RegExp', async () => { | ||
const rsbuild = await build({ | ||
cwd: __dirname, | ||
rsbuildConfig: { | ||
source: { | ||
assetsInclude: [/\.json5$/], | ||
}, | ||
}, | ||
}); | ||
|
||
const files = await rsbuild.unwrapOutputJSON(); | ||
const filenames = Object.keys(files); | ||
|
||
const indexJs = await rsbuild.getIndexFile(); | ||
expect(indexJs.content).toContain('data:application/json5;base64,'); | ||
|
||
expect( | ||
isIncludeFile(filenames, 'dist/static/assets/test-temp-large.json5'), | ||
).toBeTruthy(); | ||
expect( | ||
isIncludeFile(filenames, 'dist/static/assets/test-temp-small.json5'), | ||
).toBeFalsy(); | ||
}); | ||
|
||
test('should allow to configure additional assets and match by path', async () => { | ||
const rsbuild = await build({ | ||
cwd: __dirname, | ||
rsbuildConfig: { | ||
source: { | ||
assetsInclude: path.resolve(__dirname, 'src/assets'), | ||
}, | ||
}, | ||
}); | ||
|
||
const files = await rsbuild.unwrapOutputJSON(); | ||
const filenames = Object.keys(files); | ||
|
||
const indexJs = await rsbuild.getIndexFile(); | ||
expect(indexJs.content).toContain('data:application/json5;base64,'); | ||
|
||
expect( | ||
isIncludeFile(filenames, 'dist/static/assets/test-temp-large.json5'), | ||
).toBeTruthy(); | ||
expect( | ||
isIncludeFile(filenames, 'dist/static/assets/test-temp-small.json5'), | ||
).toBeFalsy(); | ||
}); | ||
|
||
test('should allow to disable emit for additional assets', async () => { | ||
const rsbuild = await build({ | ||
cwd: __dirname, | ||
rsbuildConfig: { | ||
source: { | ||
assetsInclude: [/\.json5$/], | ||
}, | ||
output: { | ||
emitAssets: false, | ||
}, | ||
}, | ||
}); | ||
|
||
const files = await rsbuild.unwrapOutputJSON(); | ||
const filenames = Object.keys(files); | ||
|
||
expect( | ||
isIncludeFile(filenames, 'dist/static/assets/test-temp-large.json5'), | ||
).toBeFalsy(); | ||
expect( | ||
isIncludeFile(filenames, 'dist/static/assets/test-temp-small.json5'), | ||
).toBeFalsy(); | ||
}); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { join } from 'node:path'; | ||
import { defineConfig } from '@rsbuild/core'; | ||
import { outputFileSync } from 'fs-extra'; | ||
|
||
outputFileSync( | ||
join(__dirname, 'src/assets/test-temp-small.json5'), | ||
JSON.stringify({ a: 1 }), | ||
); | ||
outputFileSync( | ||
join(__dirname, 'src/assets/test-temp-large.json5'), | ||
JSON.stringify({ a: '1'.repeat(10000) }), | ||
); | ||
|
||
export default defineConfig({ | ||
output: { | ||
filenameHash: false, | ||
}, | ||
}); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import large from './assets/test-temp-large.json5'; | ||
import small from './assets/test-temp-small.json5'; | ||
|
||
console.log(large); | ||
console.log(small); |
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# source.assetsInclude | ||
|
||
- **Type:** [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition) | ||
- **Default:** `undefined` | ||
|
||
Include additional files that should be treated as static assets. | ||
|
||
By default, Rsbuild treats common image, font, audio, and video files as static assets. Through the `source.assetsInclude` config, you can specify additional file types that should be treated as static assets. These added static assets are processed using the same rules as the built-in supported static assets, see [Static Assets](/guide/basic/static-assets). | ||
|
||
The value of `source.assetsInclude` is the same as the `test` option in Rspack loader. It can be a regular expression, string, array, logical condition, etc. For more details, see [Rspack RuleSetCondition](https://rspack.dev/config/module#condition). | ||
|
||
## Example | ||
|
||
- Treating `.json5` files as static assets: | ||
|
||
```ts | ||
export default defineConfig({ | ||
source: { | ||
assetsInclude: /\.json5$/, | ||
}, | ||
}); | ||
``` | ||
|
||
- Treating multiple file types as static assets: | ||
|
||
```ts | ||
export default defineConfig({ | ||
source: { | ||
assetsInclude: [/\.json5$/, /\.pdf$/], | ||
}, | ||
}); | ||
``` | ||
|
||
- Treating specific files as static assets: | ||
|
||
```ts | ||
import path from 'node:path'; | ||
|
||
export default defineConfig({ | ||
source: { | ||
assetsInclude: path.resolve(__dirname, 'src/assets/foo.json5'), | ||
}, | ||
}); | ||
``` |
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# source.assetsInclude | ||
|
||
- **类型:** [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition) | ||
- **默认值:** `undefined` | ||
|
||
指定需要被视为静态资源的额外文件类型。 | ||
|
||
Rsbuild 默认会将常见的图片、字体、音频、视频等文件视为静态资源。通过配置 `source.assetsInclude`,你可以添加更多的文件类型,这些新增的静态资源将按照与内置静态资源相同的规则进行处理,详见 [引用静态资源](/guide/basic/static-assets)。 | ||
|
||
`source.assetsInclude` 的值与 Rspack loader 的 `test` 选项相同,可以是正则表达式、字符串、数组、逻辑条件等,详见 [Rspack RuleSetCondition](https://rspack.dev/config/module#condition)。 | ||
|
||
## 示例 | ||
|
||
- 将 `.json5` 文件视为静态资源: | ||
|
||
```ts | ||
export default defineConfig({ | ||
source: { | ||
assetsInclude: /\.json5$/, | ||
}, | ||
}); | ||
``` | ||
|
||
- 将多种文件类型视为静态资源: | ||
|
||
```ts | ||
export default defineConfig({ | ||
source: { | ||
assetsInclude: [/\.json5$/, /\.pdf$/], | ||
}, | ||
}); | ||
``` | ||
|
||
- 将指定文件视为静态资源: | ||
|
||
```ts | ||
import path from 'node:path'; | ||
|
||
export default defineConfig({ | ||
source: { | ||
assetsInclude: path.resolve(__dirname, 'src/assets/foo.json5'), | ||
}, | ||
}); | ||
``` |