feat: support extraBabelIncludes (#5942)

* dep: upgrade babel and other deps

* feat: support extraBabelIncludes

docs/config/README.md

@@ -556,6 +556,27 @@ export default {
 
 简单理解的话，可以理解为 `import react from 'react'` 会被替换为 `const react = window.React`。
 
+## extraBabelIncludes
+
+* Type: `Array`
+* Default: `[]`
+
+配置额外需要做 babel 编译的 npm 包或目录。
+
+比如：
+
+```js
+export default {
+  extraBabelIncludes: [
+    // 支持绝对路径
+    join(__dirname, '../../common'),
+
+    // 支持 npm 包
+    'react-monaco-editor',
+  ],
+}
+```
+
 ## extraBabelPlugins
 
 * Type: `Array`

docs/config/README.zh-CN.md

@@ -554,6 +554,27 @@ export default {
 
 简单理解的话，可以理解为 `import react from 'react'` 会被替换为 `const react = window.React`。
 
+## extraBabelIncludes
+
+* Type: `Array`
+* Default: `[]`
+
+配置额外需要做 babel 编译的 npm 包或目录。
+
+比如：
+
+```js
+export default {
+  extraBabelIncludes: [
+    // 支持绝对路径
+    join(__dirname, '../../common'),
+
+    // 支持 npm 包
+    'react-monaco-editor',
+  ],
+}
+```
+
 ## extraBabelPlugins
 
 * Type: `Array`

packages/bundler-webpack/package.json

@@ -29,18 +29,18 @@
     "anymatch": "3.1.1"
   },
   "dependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "7.12.10",
     "@types/sockjs-client": "1.1.1",
-    "@types/webpack": "4.41.22",
+    "@types/webpack": "4.41.25",
     "@types/webpack-dev-middleware": "3.7.2",
     "@umijs/bundler-utils": "3.3.3",
     "@umijs/types": "3.3.3",
     "@umijs/utils": "3.3.3",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.2",
     "copy-webpack-plugin": "6.1.0",
     "css-loader": "3.6.0",
-    "css-modules-typescript-loader": "4.0.0",
-    "file-loader": "6.1.0",
+    "css-modules-typescript-loader": "4.0.1",
+    "file-loader": "6.2.0",
     "friendly-errors-webpack-plugin": "1.7.0",
     "less": "3.12.2",
     "less-loader": "5.0.0",
@@ -53,16 +53,16 @@
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.2",
-    "raw-loader": "4.0.1",
-    "react-error-overlay": "6.0.7",
+    "raw-loader": "4.0.2",
+    "react-error-overlay": "6.0.8",
     "schema-utils": "^1.0.0",
     "sockjs-client": "1.5.0",
     "speed-measure-webpack-plugin": "1.3.3",
     "stats-webpack-plugin": "0.7.0",
     "strip-ansi": "6.0.0",
     "style-loader": "2.0.0",
     "terser-webpack-plugin": "4.2.3",
-    "url-loader": "4.1.0",
+    "url-loader": "4.1.1",
     "webpack": "4.44.1",
     "webpack-chain": "6.5.1",
     "webpack-dev-middleware": "3.7.2",

packages/bundler-webpack/src/cli.ts

@@ -73,6 +73,7 @@ if (args.version && !command) {
     config,
   });
 
+  // @ts-ignore
   const webpackConfig = await bundler.getConfig({
     env,
     type: BundlerConfigType.csr,
@@ -92,6 +93,7 @@ if (args.version && !command) {
     const port = await portfinder.getPortPromise({
       port: 8000,
     });
+    // @ts-ignore
     webpackConfig.plugins!.push(new DevCompileDonePlugin({ port }));
     const devServerOpts = bundler.setupDevServerOpts({
       bundleConfigs: [webpackConfig],

packages/bundler-webpack/src/fixtures/.extraBabelIncludes/hoo.js

@@ -0,0 +1,6 @@
+
+export default function() {
+  let hoo = 1;
+  hoo += 1;
+  return hoo;
+}

packages/bundler-webpack/src/fixtures/extraBabelIncludes/config.ts

@@ -0,0 +1,12 @@
+import { join } from 'path';
+
+export default {
+  nodeModulesTransform: {
+    type: 'none'
+  },
+  extraBabelIncludes: [
+    join(__dirname, '../.extraBabelIncludes'),
+    'foo',
+    'bar',
+  ],
+}

packages/bundler-webpack/src/fixtures/extraBabelIncludes/expect.ts

@@ -0,0 +1,7 @@
+import { IExpectOpts } from '../types';
+
+export default ({ indexJS }: IExpectOpts) => {
+  expect(indexJS).toContain('var bar = 1;');
+  expect(indexJS).toContain('var foo = 1;');
+  expect(indexJS).toContain('var hoo = 1;');
+}

packages/bundler-webpack/src/fixtures/extraBabelIncludes/index.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+import bar from 'bar/bar';
+// @ts-ignore
+import foo from 'foo/foo';
+import hoo from '../.extraBabelIncludes/hoo';
+
+bar();
+foo();
+hoo();

packages/bundler-webpack/src/getConfig/getConfig.ts

@@ -25,6 +25,7 @@ import {
   es5ImcompatibleVersionsToPkg,
 } from './nodeModulesTransform';
 import resolveDefine from './resolveDefine';
+import { getPkgPath, shouldTransform } from './pkgMatch';
 
 export interface IOpts {
   cwd: string;
@@ -190,13 +191,39 @@ export default async function getConfig(
         .loader(require.resolve('babel-loader'))
         .options(babelOpts);
 
+  if (config.extraBabelIncludes) {
+    config.extraBabelIncludes.forEach((include, index) => {
+      const rule = `extraBabelInclude_${index}`;
+      // prettier-ignore
+      webpackConfig.module
+        .rule(rule)
+          .test(/\.(js|mjs|jsx)$/)
+            .include
+            .add((a) => {
+              // 支持绝对路径匹配
+              if (include.startsWith('/')) {
+                return a.startsWith(include);
+              }
+
+              // 支持 node_modules 下的 npm 包
+              if (!a.includes('node_modules')) return false;
+              const pkgPath = getPkgPath(a);
+              return shouldTransform(pkgPath, include);
+            })
+            .end()
+          .use('babel-loader')
+            .loader(require.resolve('babel-loader'))
+            .options(babelOpts);
+    });
+  }
+
   // umi/dist/index.esm.js 走 babel 编译
   // why? 极速模式下不打包 @umijs/runtime
   if (process.env.UMI_DIR) {
     // prettier-ignore
     webpackConfig.module
-      .rule('js')
-        .test(/\.(js|mjs|jsx|ts|tsx)$/)
+      .rule('js-for-umi-dist')
+        .test(/\.(js|mjs|jsx)$/)
         .include.add(join(process.env.UMI_DIR as string, 'dist', 'index.esm.js')).end()
         .use('babel-loader')
           .loader(require.resolve('babel-loader'))
@@ -522,6 +549,7 @@ export default async function getConfig(
     await config.chainWebpack(webpackConfig, {
       type,
       env,
+      // @ts-ignore
       webpack: bundleImplementor,
       createCSSRule: createCSSRuleFn,
     });

packages/bundler-webpack/src/getConfig/pkgMatch.ts

@@ -0,0 +1,16 @@
+import { dirname } from 'path';
+import { pkgUp } from '@umijs/utils';
+
+const pkgPathCache = {};
+
+export function getPkgPath(filePath: string) {
+  const dir = dirname(filePath);
+  if (dir in pkgPathCache) return pkgPathCache[dir];
+  pkgPathCache[dir] = pkgUp.sync({ cwd: filePath });
+  return pkgPathCache[dir];
+}
+
+export function shouldTransform(pkgPath: string, include: string) {
+  const { name } = require(pkgPath); // eslint-disable-line
+  return name === include;
+}

packages/bundler-webpack/src/index.test.ts

@@ -2,8 +2,8 @@ import { join } from 'path';
 import { readdirSync, readFileSync, statSync } from 'fs';
 import { getFile, rimraf, portfinder } from '@umijs/utils';
 import { BundlerConfigType } from '@umijs/types';
-import { Bundler } from './index';
 import { Server } from '@umijs/server';
+import { Bundler } from './index';
 import DevCompileDonePlugin from './DevCompileDonePlugin';
 
 const fixtures = join(__dirname, 'fixtures');
@@ -118,6 +118,7 @@ test.skip('dev', async () => {
   const port = await portfinder.getPortPromise({
     port: 8000,
   });
+  // @ts-ignore
   webpackConfig.plugins!.push(new DevCompileDonePlugin({ port }));
   const devServerOpts = bundler.setupDevServerOpts({
     bundleConfigs: [webpackConfig],

packages/core/package.json

@@ -24,25 +24,25 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/core": "7.12.3",
-    "@babel/register": "7.12.1",
+    "@babel/core": "7.12.10",
+    "@babel/register": "7.12.10",
     "@hapi/joi": "16.1.8",
-    "@types/ejs": "3.0.4",
+    "@types/ejs": "3.0.5",
     "@types/hapi__joi": "16.0.12",
-    "@types/marked": "^1.1.0",
+    "@types/marked": "^1.2.1",
     "@types/marked-terminal": "^3.1.1",
-    "@types/prettier": "2.1.0",
+    "@types/prettier": "2.1.6",
     "@types/tapable": "1.0.6",
     "@umijs/ast": "3.3.3",
     "@umijs/babel-preset-umi": "3.3.3",
     "@umijs/error-code-map": "^1.0.1",
     "@umijs/utils": "3.3.3",
     "dotenv": "8.2.0",
     "ejs": "3.1.5",
-    "marked": "1.1.1",
+    "marked": "1.2.7",
     "marked-terminal": "4.1.0",
     "os-locale": "5.0.0",
-    "prettier": "2.1.1",
+    "prettier": "2.2.1",
     "set-value": "3.0.2",
     "tapable": "1.1.3"
   }

packages/preset-built-in/src/index.ts

@@ -34,6 +34,7 @@ export default function () {
       require.resolve('./plugins/features/dynamicImport'),
       require.resolve('./plugins/features/exportStatic'),
       require.resolve('./plugins/features/externals'),
+      require.resolve('./plugins/features/extraBabelIncludes'),
       require.resolve('./plugins/features/extraBabelPlugins'),
       require.resolve('./plugins/features/extraBabelPresets'),
       require.resolve('./plugins/features/extraPostCSSPlugins'),

packages/preset-built-in/src/plugins/features/extraBabelIncludes.ts

@@ -0,0 +1,12 @@
+import { IApi } from '@umijs/types';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'extraBabelIncludes',
+    config: {
+      schema(joi) {
+        return joi.array();
+      },
+    },
+  });
+};

packages/test/package.json

@@ -26,18 +26,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "7.12.10",
     "@umijs/babel-preset-umi": "3.3.3",
     "@umijs/utils": "3.3.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^25.4.0",
-    "core-js": "3.6.5",
+    "core-js": "3.8.2",
     "identity-obj-proxy": "3.0.0",
     "jest": "^25.4.0",
     "jest-cli": "^25.4.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
     "regenerator-runtime": "^0.13.7",
-    "whatwg-fetch": "^3.4.1"
+    "whatwg-fetch": "^3.5.0"
   },
   "bin": {
     "umi-test": "bin/umi-test.js"

packages/types/index.d.ts

@@ -310,6 +310,7 @@ export interface BaseIConfig extends IConfigCore {
     extraRoutePaths?: () => Promise<string[]>;
   };
   externals?: any;
+  extraBabelIncludes?: string[];
   extraBabelPlugins?: IBabelPresetOrPlugin[];
   extraBabelPresets?: IBabelPresetOrPlugin[];
   extraPostCSSPlugins?: any[];

packages/umi/package.json

@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "7.12.10",
     "@umijs/core": "3.3.3",
     "@umijs/preset-built-in": "3.3.3",
     "@umijs/runtime": "3.3.3",