-
Notifications
You must be signed in to change notification settings - Fork 373
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(builder): replace babel config with @rsbuild/babel-preset (#…
- Loading branch information
1 parent
1563e63
commit db59437
Showing
17 changed files
with
2,193 additions
and
2,697 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
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
136 changes: 73 additions & 63 deletions
136
packages/builder/builder-webpack-provider/src/plugins/tsLoader.ts
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 |
|---|---|---|
| @@ -1,84 +1,94 @@ | ||
| import { | ||
| TS_REGEX, | ||
| resolvePackage, | ||
| applyScriptCondition, | ||
| getBrowserslistWithDefault, | ||
| } from '@modern-js/builder-shared'; | ||
| import _ from '@modern-js/utils/lodash'; | ||
| import { getBabelConfigForWeb } from '@rsbuild/babel-preset/web'; | ||
| import { BuilderPlugin } from '../types'; | ||
| import { getUseBuiltIns } from './babel'; | ||
|
|
||
| export const builderPluginTsLoader = (): BuilderPlugin => { | ||
| return { | ||
| name: 'builder-plugin-ts-loader', | ||
| setup(api) { | ||
| api.modifyWebpackChain(async (chain, { CHAIN_ID, getCompiledPath }) => { | ||
| const config = api.getNormalizedConfig(); | ||
| if (!config.tools.tsLoader) { | ||
| return; | ||
| } | ||
| api.modifyWebpackChain( | ||
| async (chain, { target, CHAIN_ID, getCompiledPath }) => { | ||
| const config = api.getNormalizedConfig(); | ||
| if (!config.tools.tsLoader) { | ||
| return; | ||
| } | ||
| const { getBabelUtils, applyOptionsChain } = await import( | ||
| '@modern-js/utils' | ||
| ); | ||
|
|
||
| const { rootPath } = api.context; | ||
| const babelLoaderOptions = { | ||
| presets: [ | ||
| [ | ||
| resolvePackage('@modern-js/babel-preset-app', __dirname), | ||
| { | ||
| appDirectory: rootPath, | ||
| target: 'client', | ||
| useTsLoader: true, | ||
| useBuiltIns: getUseBuiltIns(config), | ||
| userBabelConfig: config.tools.babel, | ||
| disableReactPreset: true, | ||
| }, | ||
| ], | ||
| ], | ||
| }; | ||
| const { rootPath } = api.context; | ||
| const browserslist = await getBrowserslistWithDefault( | ||
| rootPath, | ||
| config, | ||
| target, | ||
| ); | ||
|
|
||
| const baseBabelConfig = getBabelConfigForWeb({ | ||
| presetEnv: { | ||
| targets: browserslist, | ||
| useBuiltIns: getUseBuiltIns(config), | ||
| }, | ||
| }); | ||
|
|
||
| const babelUtils = getBabelUtils(baseBabelConfig); | ||
|
|
||
| const includes: Array<string | RegExp> = []; | ||
| const excludes: Array<string | RegExp> = []; | ||
| const babelLoaderOptions = applyOptionsChain( | ||
| baseBabelConfig, | ||
| config.tools.babel, | ||
| babelUtils, | ||
| ); | ||
|
|
||
| const tsLoaderUtils = { | ||
| addIncludes(items: string | RegExp | (string | RegExp)[]) { | ||
| includes.push(..._.castArray(items)); | ||
| }, | ||
| addExcludes(items: string | RegExp | (string | RegExp)[]) { | ||
| excludes.push(..._.castArray(items)); | ||
| }, | ||
| }; | ||
| const { applyOptionsChain } = await import('@modern-js/utils'); | ||
| // @ts-expect-error ts-loader has incorrect types for compilerOptions | ||
| const tsLoaderOptions = applyOptionsChain( | ||
| { | ||
| compilerOptions: { | ||
| target: 'esnext', | ||
| module: 'esnext', | ||
| const includes: Array<string | RegExp> = []; | ||
| const excludes: Array<string | RegExp> = []; | ||
|
|
||
| const tsLoaderUtils = { | ||
| addIncludes(items: string | RegExp | (string | RegExp)[]) { | ||
| includes.push(..._.castArray(items)); | ||
| }, | ||
| addExcludes(items: string | RegExp | (string | RegExp)[]) { | ||
| excludes.push(..._.castArray(items)); | ||
| }, | ||
| }; | ||
| // @ts-expect-error ts-loader has incorrect types for compilerOptions | ||
| const tsLoaderOptions = applyOptionsChain( | ||
| { | ||
| compilerOptions: { | ||
| target: 'esnext', | ||
| module: 'esnext', | ||
| }, | ||
| transpileOnly: true, | ||
| allowTsInNodeModules: true, | ||
| }, | ||
| transpileOnly: true, | ||
| allowTsInNodeModules: true, | ||
| }, | ||
| config.tools.tsLoader, | ||
| tsLoaderUtils, | ||
| ); | ||
| const rule = chain.module.rule(CHAIN_ID.RULE.TS); | ||
| config.tools.tsLoader, | ||
| tsLoaderUtils, | ||
| ); | ||
| const rule = chain.module.rule(CHAIN_ID.RULE.TS); | ||
|
|
||
| applyScriptCondition({ | ||
| rule, | ||
| config, | ||
| context: api.context, | ||
| includes, | ||
| excludes, | ||
| }); | ||
| applyScriptCondition({ | ||
| rule, | ||
| config, | ||
| context: api.context, | ||
| includes, | ||
| excludes, | ||
| }); | ||
|
|
||
| rule | ||
| .test(TS_REGEX) | ||
| .use(CHAIN_ID.USE.BABEL) | ||
| .loader(getCompiledPath('babel-loader')) | ||
| .options(babelLoaderOptions) | ||
| .end() | ||
| .use(CHAIN_ID.USE.TS) | ||
| .loader(require.resolve('ts-loader')) | ||
| .options(tsLoaderOptions); | ||
| }); | ||
| rule | ||
| .test(TS_REGEX) | ||
| .use(CHAIN_ID.USE.BABEL) | ||
| .loader(getCompiledPath('babel-loader')) | ||
| .options(babelLoaderOptions) | ||
| .end() | ||
| .use(CHAIN_ID.USE.TS) | ||
| .loader(require.resolve('ts-loader')) | ||
| .options(tsLoaderOptions); | ||
| }, | ||
| ); | ||
| }, | ||
| }; | ||
| }; |
Oops, something went wrong.