接口: Source
Source 选项用于修改源文件相关的行为。
属性
alias?
optional alias?: Record<string, string | false | string[]>
创建别名，以便更方便地 import 或 require 某些模块。
已被弃用
请使用 Resolve.alias 代替。
默认值
assetsInclude?
optional assetsInclude?: RuleSetCondition
指定额外需要被视为静态资源的文件。
默认值
备注
默认情况下，Rsbuild 会将常见的图片、字体、音频和视频文件视为静态资源。通过 source.assetsInclude 配置，你可以指定额外需要被视为静态资源的文件类型。这些新增的静态资源会按照与内置支持的静态资源相同的规则进行处理。
source.assetsInclude 的用法与 Rspack 中的 Condition 一致，支持传入字符串、正则表达式、条件数组或逻辑条件来匹配模块路径或资源。
示例
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
assetsInclude: /\.json5$/,
},
})
decorators?
optional decorators?: Decorators
用于配置装饰器语法。
默认值
备注
更多信息请参见 Decorators.version。
define?
optional define?: DefinePluginOptions
define 选项用于在编译时定义一些值或表达式。
默认值
示例
使用 define 定义环境变量。
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
define: {
BUILD_VERSION: JSON.stringify(process.env.BUILD_VERSION ?? 'unknown_version'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},
},
})
表达式会被替换为对应的代码片段：
const version = BUILD_VERSION;
if (process.env.NODE_ENV === 'development') {}
// ⬇️ Turn into being...
const version = "unknown_version";
if ("development" === 'development') {}
对 typeof 使用 define。
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
define: {
'typeof window': JSON.stringify("undefined"),
},
},
})
typeof 表达式会被替换为对应的代码片段：
if (typeof window !== 'undefined') {}
// ⬇️ Turn into being...
if ("undefined" !== 'undefined') {}
使用 define 定义对象。
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
define: {
'import.meta': {
foo: JSON.stringify('foo'),
bar: { baz: 0 },
},
},
},
})
表达式会被替换为对应的代码片段：
console.log(import.meta)
// ⬇️ Turn into being...
console.log({ foo: "foo", bar: { baz: 0 } })
备注
-
如果提供的值是字符串，它将被用作代码片段。
-
如果提供的值是对象，它的所有 key 都会以相同的方式定义。
-
如果提供的值不是字符串，它会被字符串化（包括函数）。
-
需要注意的是，如果 key 带有 typeof 前缀，它将只针对 typeof 调用进行定义。
entry?
optional entry?: Entry
Entry 选项用于设置入口模块。
默认值
'./src/index.js'
示例
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
entry: './src/pages/main/index.js',
},
})
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
entry: ['./src/prefetch.js', './src/pages/main/index.js'],
},
})
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
entry: {
foo: './src/pages/foo/index.js',
bar: ['./src/pages/bar/index.js', './src/post.js'], // multiple entry modules is allowed
},
},
})
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
entry: {
foo: './src/pages/foo/index.js',
bar: {
import: ['./src/prefetch.js', './src/pages/bar'],
},
},
},
})
exclude?
optional exclude?: RuleSetCondition[]
source.exclude 用于指定需要从编译中排除的 JavaScript 文件。
默认值
备注
默认情况下，Rsbuild 会编译当前目录下的 JavaScript 文件以及所有目录下的 TypeScript/JSX 文件。通过 source.exclude 配置，可以指定不需要编译的文件或目录。
source.exclude 的用法与 Rspack 中的 Rule.exclude 一致，支持传入字符串或正则表达式来匹配模块路径。
示例
你可以将特定的文件或目录排除在编译之外，以提升构建性能或避免处理某些文件：
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
exclude: [
// Exclude all files in the test directory
/[\\/]test[\\/]/,
// Exclude specific file
'./src/legacy-file.js',
// Exclude files matching a pattern
/\.stories\.(js|ts)x?$/,
],
},
})
你可以排除不需要编译的特定第三方依赖：
import { defineConfig } from '@lynx-js/rspeedy'
import path from 'node:path'
import { createRequire } from 'node:module'
const require = createRequire(import.meta.url)
export default defineConfig({
source: {
exclude: [
// Exclude specific package
path.dirname(require.resolve('lodash')),
// Exclude using regex pattern
/node_modules[\\/]lodash-es[\\/]/,
],
},
})
include?
optional include?: RuleSetCondition[]
source.include 用于指定额外需要编译的 JavaScript 文件。
默认值
未设置时，Rsbuild 会编译当前目录下的 JavaScript 文件以及所有目录下的 TypeScript 或 JSX 文件，同时排除 node_modules 下的 JavaScript 文件。
备注
为了避免重复编译，默认情况下，Rsbuild 只会编译当前目录下的 JavaScript
文件以及所有目录下的 TypeScript 和 JSX 文件。它不会编译 node_modules 下的 JavaScript 文件。
通过 source.include 配置，可以指定需要由 Rsbuild 编译的目录或模块。
source.include 的用法与 Rspack 中的 Rule.include 一致，支持传入字符串或正则表达式来匹配模块路径。
示例
一个典型的使用场景是编译 node_modules 下的 npm 包，因为部分第三方依赖包含 ESNext 语法，而 Lynx 可能不支持这些语法。你可以通过该配置指定需要编译的依赖，从而解决这个问题。
import { createRequire } from 'node:module'
import path from 'node:path'
import { defineConfig } from '@lynx-js/rspeedy'
const require = createRequire(import.meta.url)
export default defineConfig({
source: {
include: [
// Method 1:
// First get the path of the module by `require.resolve`
// Then pass path.dirname to point to the corresponding directory
path.dirname(require.resolve('query-string')),
// Method 2:
// Match by regular expression
// All paths containing `node_modules/query-string/` will be matched
/node_modules[\\/]query-string[\\/]/,
],
},
})
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from '@lynx-js/rspeedy'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
const packagesDir = path.resolve(__dirname, '../../packages')
export default defineConfig({
source: {
include: [
// Compile all files in Monorepo's package directory
// It is recommended to exclude the node_modules
{
and: [packagesDir, { not: /[\\/]node_modules[\\/]/ }],
},
],
},
})
preEntry?
optional preEntry?: string | string[]
在每个页面的入口文件之前添加一段脚本。该脚本会在页面代码之前执行。它可以用于执行全局逻辑，如注入 polyfill、设置全局样式等。
默认值
备注
更多详情请参见 source.preEntry。
示例
相对路径会基于项目根目录进行解析。
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
preEntry: './src/polyfill.ts',
},
})
optional transformImport?: TransformImport[]
TransformImport 选项用于转换导入路径，以便从第三方包的子路径中按需导入模块，功能类似于 babel-plugin-import。
默认值
示例
使用 TUX 组件库时，可以通过以下配置按需引入组件：
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
transformImport: [
{
libraryName: 'foo',
customName: 'foo/src/components/{{ member }}/{{ member }}',
},
],
},
})
这会将以下源代码：
import { Button } from 'foo'
to:
import { Button } from 'foo/src/components/Button/Button'
tsconfigPath?
optional tsconfigPath?: string
配置自定义的 tsconfig.json 文件路径，可以是相对路径或绝对路径。
默认值
'./tsconfig.json'
备注
tsconfigPath 配置会影响以下行为：
示例
相对路径会基于项目根目录进行解析。
import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
source: {
tsconfigPath: './tsconfig.build.json',
},
})
