undefined
Transform the import path, which can be used to modularly import the subpath of third-party packages. The functionality is similar to babel-plugin-import.
When using the antd component library (versions below v5), you can import components on demand with the following config:
The source code is:
Will be transformed into:
When using lodash, you can automatically refer to the subpath through transformImport
to reduce bundle size.
The source code is:
Will be transformed to:
Please avoid the following usage, otherwise all of lodash's code will be imported:
transformImport
is only applicable to modules compiled by Rsbuild. Note that Rsbuild does not compile JavaScript files in the node_modules by default. This means that the code in the node_modules directory will not be processed by transformImport
.
If you want to process the code in node_modules through transformImport
, please add the relevant modules to the source.include config.
string
The original import path that needs to be transformed.
string
'lib'
Used to splice the transformed path, the splicing rule is ${libraryName}/${libraryDirectory}/${member}
, where member is the imported member.
Example:
Out:
boolean
undefined
Determines whether to import related styles. If it is true
, the path ${libraryName}/${libraryDirectory}/${member}/style
will be imported. If it is false
or undefined
, the style will not be imported.
When it is set to true
:
Out:
string
undefined
This configuration is used to splice the import path when importing styles. If this configuration is specified, the style
configuration option will be ignored. The spliced import path is ${libraryName}/${styleLibraryDirectory}/${member}
.
When it is set to styles
:
Out:
boolean
true
Whether to convert camelCase imports to kebab-case.
Example:
Out:
boolean
true
Whether to convert import statements to default imports.
Example:
Out:
string
undefined
Customize the transformed path.
For example, the following config will transform import { foo } from 'my-lib'
into import foo from 'my-lib/foo'
.
In addition, you can also declare the format of the path after transformation, such as setting it to my-lib/{{ camelCase member }}
to convert member into camel case.
The following formats are supported:
kebabCase
: lowercase letters, words joined by hyphens. For example: my-variable-name
.snakeCase
: lowercase letters, words joined by underscores. For example: my_variable_name
.camelCase
: first letter lowercase, the first letter of each following word uppercase. For example: myVariableName
.upperCase
: uppercase letters, other characters unchanged. For example: MY-VARIABLE-NAME
.lowerCase
: lowercase letters, other characters unchanged. For example: my-variable-name
.string
undefined
Customize the transformed style path, the usage is consistent with customName
.