feat(rzpack): 支持babel

Author: renzp94

packages/rzpack/package.json

@@ -40,6 +40,7 @@
     "node": ">=16.0.0"
   },
   "dependencies": {
+    "@babel/core": "^7.22.17",
     "@module-federation/fmr": "^0.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
     "@renzp/css-scoped-loader": "^0.0.16",
@@ -52,6 +53,7 @@
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@svgr/webpack": "^6.5.1",
     "@swc/core": "1.3.32",
+    "babel-loader": "^9.1.3",
     "browserslist": "^4.23.0",
     "cac": "^6.7.14",
     "compression": "^1.7.4",
@@ -80,6 +82,7 @@
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.8.3",
     "react-refresh": "^0.14.2",
+    "rzpack-babel-preset": "^0.0.2",
     "rzpack-ui": "workspace:*",
     "rzpack-utils": "workspace:*",
     "sirv": "^2.0.4",

packages/rzpack/src/index.ts

@@ -96,6 +96,7 @@ export type RzpackChain = (w: WebpackChain) => WebpackChain
 export const defineConfig = (configs: RzpackConfigs) => configs
 
 export enum JSX_TOOLS {
+  BABEL = 'babel',
   ESBUILD = 'esbuild',
   SWC = 'swc',
 }

packages/rzpack/src/webpack/assets/jsx/babel.ts

@@ -0,0 +1,18 @@
+import { requireResolve } from 'rzpack-utils'
+import type WebpackChain from 'webpack-chain'
+
+export default (webpackChain: WebpackChain) => {
+  // 配置babel
+  return webpackChain.module
+    .rule('babel')
+    .test(/\.[tj]sx?$/)
+    .exclude.add(/node_modules/)
+    .end()
+    .use('babel')
+    .loader(requireResolve('babel-loader'))
+    .options({
+      cacheDirectory: true,
+      presets: [requireResolve('rzpack-babel-preset')],
+    })
+    .end()
+}

packages/rzpack/src/webpack/assets/jsx/index.ts

@@ -2,12 +2,14 @@ import { requireResolve } from 'rzpack-utils'
 import type WebpackChain from 'webpack-chain'
 import { JSX_TOOLS } from '../../..'
 import type { RzpackAssets } from '../index'
+import babel from './babel'
 import esbuild from './esbuild'
 import swc from './swc'
 
 export default (webpackChain: WebpackChain, assets: RzpackAssets) => {
   const { jsxTools = JSX_TOOLS.ESBUILD, cssScoped } = assets ?? {}
   const transformTools = {
+    [JSX_TOOLS.BABEL]: babel,
     [JSX_TOOLS.ESBUILD]: esbuild,
     [JSX_TOOLS.SWC]: swc,
   }

packages/rzpack/src/webpack/configs/minimizer.ts

@@ -27,6 +27,7 @@ export default (
 
   const minimizers = {
     swc: esbuildMinimizer,
+    babel: esbuildMinimizer,
     esbuild: esbuildMinimizer,
   }
 

playground/rzpack.config.ts

@@ -1,7 +1,7 @@
 import { BUILDER, JSX_TOOLS, defineConfig } from 'rzpack'
 
 export default defineConfig({
-  builder: BUILDER.RSPACK,
+  // builder: BUILDER.RSPACK,
   html: {
     title: 'rzpack-antd',
   },
@@ -12,7 +12,7 @@ export default defineConfig({
     file: './src/theme/globalVars.ts',
   },
   assets: {
-    jsxTools: JSX_TOOLS.ESBUILD,
+    jsxTools: JSX_TOOLS.BABEL,
     cssScoped: true,
   },
   gzip:true,