feat(*): Separate the babel config as a preset library, set absolute …

…babel-runtime path

.changeset/few-suits-shave.md

@@ -0,0 +1,6 @@
+---
+'@yueqing/babel-preset-react-app': minor
+'@yueqing/webpack': minor
+---
+
+Separate the babel config as a preset library, set absolute babel-runtime path

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky install",
-    "build": "pnpm build --filter \"@yueqing/*\"",
-    "test": "pnpm test --filter \"@yueqing/*\"",
+    "build": "pnpm build -r",
+    "test": "pnpm test -r",
     "lint": "eslint --ext .js,.ts --format=pretty ./packages",
     "lint:fix": "eslint --fix --ext .js,.ts --format=pretty ./packages",
     "ci:version": "changeset version && pnpm install --frozen-lockfile false",

packages/babel-preset-react-app/README.md

@@ -0,0 +1,24 @@
+# @yueqing/babel-preset-yueqing-app
+
+@yueqing/webpack is a babel preset for yueqing webpack
+
+## Usage
+
+**Install**
+
+```shell
+yarn add @yueqing/babel-preset-yueqing-app -D
+
+# or
+
+npm install @yueqing/babel-preset-yueqing-app -D
+```
+
+**Babel config**
+
+```js
+// babel.config.js
+module.exports = () => ({
+  presets: [require.resolve('@yueqing/babel-preset-yueqing-app')]
+})
+```

packages/babel-preset-react-app/index.ts

@@ -0,0 +1,60 @@
+/* eslint-disable global-require */
+import path from 'path'
+
+const main = (/* api: any  , opts = {} */) => ({
+  presets: [
+    [
+      require('@babel/preset-env').default,
+      {
+        // 允许在入口点中导入 core.js ，并使用 browserlist 选择 polyfills
+        useBuiltIns: 'entry',
+        corejs: 3,
+        exclude: ['transform-typeof-symbol'],
+      },
+    ],
+    require('@babel/preset-typescript').default,
+    [
+      require('@babel/preset-react').default,
+      {
+        runtime: 'automatic',
+      },
+    ],
+  ],
+  plugins: [
+    [
+      require('@babel/plugin-transform-runtime').default,
+      {
+        helpers: true,
+        corejs: false,
+        version: require('@babel/runtime/package.json').version,
+        regenerator: true,
+        // 预先解析 @babel/runtime 的位置，避免 @babel/runtime 未安装在根依赖目录时找不到
+        absoluteRuntime: path.dirname(
+          require.resolve('@babel/runtime/package.json'),
+        ),
+      },
+    ],
+    [
+      // TC39 Proposals: 使用装饰器 @xxx，注意：默认是旧版本的提案
+      require('@babel/plugin-proposal-decorators').default,
+      false,
+    ],
+    [
+      // ES2022: 类属性 class Foo { name = 'foo'; static getName = ... }
+      require('@babel/plugin-proposal-class-properties').default,
+      { loose: true },
+    ],
+    [
+      // ES2022: 私有属性 class Foo { #name = 'foo'; getName = () => this.#name }
+      require('@babel/plugin-proposal-private-property-in-object').default,
+      { loose: true },
+    ],
+    [
+      // TC39 Proposals: 私有方法
+      require('@babel/plugin-proposal-private-methods').default,
+      { loose: true },
+    ],
+  ].filter(Boolean),
+})
+
+export default main

packages/babel-preset-react-app/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@yueqing/babel-preset-react-app",
+  "version": "0.0.0",
+  "description": "babel preset for yueqing webpack",
+  "main": "./lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/simonwong/yueqing.git",
+    "directory": "packages/webpack"
+  },
+  "author": "Simon <wsj_simon@163.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "rm -rf ./lib && tsc -p tsconfig.json",
+    "test": "pnpm run build && echo \"run test\""
+  },
+  "dependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.2",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.17.2"
+  }
+}

packages/babel-preset-react-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./lib",
+  },
+  "include": [
+    "*.ts",
+  ],
+  "exclude": [
+    "**/node_modules/**"
+  ]
+}

packages/webpack/fixtures/test.js

@@ -7,6 +7,7 @@ const entry = path.join(__dirname, './src/index.jsx')
 
 const testDev = async () => {
   console.log('Start test in development')
+  process.env.NODE_ENV = 'development'
   const config = getConfig({
     userConfig: {
       entry,
@@ -32,6 +33,7 @@ const testDev = async () => {
 
 const testProd = () => {
   console.log('Start test in production')
+  process.env.NODE_ENV = 'production'
   const config = getConfig({
     userConfig: {
       entry,

packages/webpack/package.json

@@ -25,19 +25,10 @@
     "test": "pnpm run build && node ./fixtures/test"
   },
   "dependencies": {
-    "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.2",
-    "@babel/plugin-proposal-private-methods": "^7.16.11",
-    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@svgr/webpack": "^6.2.1",
+    "@yueqing/babel-preset-react-app": "workspace:^0.0.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "chalk": "4.x",

packages/webpack/src/build/setModule.ts

@@ -13,34 +13,13 @@ const getModuleBase = (
     use: [
       {
         loader: require.resolve('babel-loader'),
-        // TODO: 抽成一个 babel preset
         options: {
           cacheDirectory: true,
+          cacheCompression: false,
           babelrc: false,
-          presets: [
-            '@babel/preset-env',
-            '@babel/preset-typescript',
-            [
-              '@babel/preset-react',
-              {
-                runtime: 'automatic',
-              },
-            ],
-          ],
+          presets: [require.resolve('@yueqing/babel-preset-react-app')],
           plugins: [
             ctx.isDevelopmentEnv && require.resolve('react-refresh/babel'),
-            '@babel/plugin-transform-runtime',
-            // TC39 Proposals: 使用装饰器 @xxx
-            ['@babel/plugin-proposal-decorators', false],
-            // ES2022: 类属性 class Foo { name = 'foo'; static getName = ... }
-            ['@babel/plugin-proposal-class-properties', { loose: true }],
-            // ES2022: 私有属性 class Foo { #name = 'foo'; getName = () => this.#name }
-            [
-              '@babel/plugin-proposal-private-property-in-object',
-              { loose: true },
-            ],
-            // TC39 Proposals: 私有方法
-            ['@babel/plugin-proposal-private-methods', { loose: true }],
           ].filter(Boolean),
         },
       },