Merge pull request #182 from TreeTreeDi/master

fix(ko): #180 add immer and react-grid-layout to babel transpile for legacy browser

Author: kiwiwong

.changeset/happy-beans-speak.md

@@ -0,0 +1,5 @@
+---
+'ko': patch
+---
+
+fix(ko): #180 add babel rule for monaco deps to support Chrome 66

packages/ko/package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.18.0",
+    "core-js": "^3.30.0",
     "@dtinsight/auto-polyfills-webpack-plugin": "workspace:2.0.0",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.2",
     "@parcel/css": "^1.12.2",

packages/ko/src/webpack/index.ts

@@ -97,7 +97,13 @@ class WebpackConfig {
             }),
         ].filter(Boolean),
         extensions: this.extensions,
-        alias,
+        alias: {
+          ...alias,
+          // 只 alias core-js v3 的 modules 路径，不影响 v2 的 library 路径
+          'core-js/modules': require
+            .resolve('core-js')
+            .replace(/\/index\.js$/, '/modules'),
+        },
         fallback: {
           fs: false,
           path: false,

packages/ko/src/webpack/loaders/script.ts

@@ -22,15 +22,59 @@ class Script {
           inline: 'fallback',
         },
       },
+      // Monaco worker 依赖专用规则（注入 corejs 兼容 chrome 66）
       {
         test: /\.m?(t|j)sx?$/,
         include: (input: string) => {
+          return (
+            input.includes('monaco-sql-languages') ||
+            input.includes('dt-sql-parser') ||
+            input.includes('antlr4ng') ||
+            input.includes('antlr4-c3')
+          );
+        },
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              presets: [
+                [
+                  require.resolve('@babel/preset-env'),
+                  {
+                    useBuiltIns: 'usage',
+                    corejs: 3,
+                    targets: 'chrome >= 66',
+                  },
+                ],
+                [require.resolve('@babel/preset-typescript')],
+              ],
+              babelrc: false,
+              configFile: false,
+              cacheDirectory: true,
+              cacheCompression: false,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.m?(t|j)sx?$/,
+        include: (input: string) => {
+          if (
+            input.includes('monaco-sql-languages') ||
+            input.includes('dt-sql-parser') ||
+            input.includes('antlr4ng') ||
+            input.includes('antlr4-c3')
+          ) {
+            return false;
+          }
           // internal modules dt-common compatible
           if (/node_modules[\\/]dt-common[\\/]src[\\/]/.test(input)) {
             return true;
-          } else if (input.includes('antlr4-c3')) {
+          } else if (input.includes('immer')) {
+            return true;
+          } else if (input.includes('react-grid-layout')) {
             return true;
-          } else if (input.includes('antlr4ng')) {
+          } else if (input.includes('monaco-editor')) {
             return true;
           } else if (input.includes('node_modules')) {
             return false;