feat(bundler-vite): support reference alias (umijs#311)

* feat(bundler-vite): resolving config overrides

* feat(bundler-vite): Fix naming and block errors

* feat(bundler-vite): fix alias

* feat(bundler-vite): add alias.test.ts add cycle alias reference process

* feat(bundler-vite): fix alias and alias.test

* feat(bundler-vite): docfix

packages/bundler-vite/src/config/transformer/alias.test.ts

@@ -0,0 +1,91 @@
+import alias from './alias';
+
+describe('alias config transformer', () => {
+  test('no alias', () => {
+    expect(alias({}, {})).toEqual({
+      resolve: {
+        alias: [{ find: /^~/, replacement: '' }],
+      },
+    });
+  });
+
+  test('normal alias replacement', () => {
+    expect(
+      alias(
+        {
+          alias: {
+            umi: '@@/exports',
+            '@': '/umi-next/examples/umi',
+          },
+        },
+        {},
+      ),
+    ).toEqual({
+      resolve: {
+        alias: [
+          { find: /^~?umi(?=\/|$)/, replacement: '@@/exports' },
+          {
+            find: /^~?@(?=\/|$)/,
+            replacement: '/umi-next/examples/umi',
+          },
+          { find: /^~/, replacement: '' },
+        ],
+      },
+    });
+  });
+
+  //多层递归 alias
+  test('Multi-level alias replacement', () => {
+    expect(
+      alias(
+        {
+          alias: {
+            umi: '@@/exports',
+            '@@': '/umi-next/examples/umi',
+          },
+        },
+        {},
+      ),
+    ).toEqual({
+      resolve: {
+        alias: [
+          {
+            find: /^~?umi(?=\/|$)/,
+            replacement: '/umi-next/examples/umi/exports',
+          },
+          {
+            find: /^~?@@(?=\/|$)/,
+            replacement: '/umi-next/examples/umi',
+          },
+          { find: /^~/, replacement: '' },
+        ],
+      },
+    });
+  });
+
+  //循环 alias ,以最后一次设置为准
+  test('dead cycle alias replacement', () => {
+    expect(
+      alias(
+        {
+          alias: {
+            umi: '@@/exports',
+            '@@/exports': 'umi',
+          },
+        },
+        {},
+      ),
+    ).toEqual({
+      resolve: {
+        alias: [
+          { find: /^~?umi(?=\/|$)/, replacement: 'umi' },
+          {
+            find: /^~?@@\/exports(?=\/|$)/,
+            replacement: 'umi',
+          },
+          { find: /^~/, replacement: '' },
+        ],
+      },
+    });
+  });
+});

packages/bundler-vite/src/config/transformer/alias.ts

@@ -1,22 +1,65 @@
+import type { Alias } from 'vite';
 import type { IConfigProcessor } from '.';
 
+function hoistAlias(alias: Alias[]) {
+  function getFinalReplacement(
+    oAlias: Alias[],
+    replacement: string,
+    index: number,
+  ): string {
+    //过滤重复配置，防止死循环
+    const newAlias = oAlias.slice();
+    newAlias.splice(index, 1);
+
+    //遍历找到需要深层替换的配置
+    for (let i = 0; i < newAlias.length; i++) {
+      if ((newAlias[i].find as RegExp).test(replacement)) {
+        replacement = replacement.replace(
+          newAlias[i].find,
+          newAlias[i].replacement,
+        );
+        return getFinalReplacement(newAlias, replacement, i);
+      }
+    }
+    return replacement;
+  }
+
+  alias.forEach((rule: Alias, index: number, alias: Alias[]) => {
+    rule.replacement = getFinalReplacement(alias, rule.replacement, index);
+  });
+  return alias;
+}
+
 /**
  * transform umi alias to vite alias
  */
 export default (function alias(userConfig) {
-  const config: ReturnType<IConfigProcessor> = {};
+  const config: ReturnType<IConfigProcessor> = {
+    resolve: {
+      alias: [
+        // to support less-loader ~ for local deps, refer: https://github.com/vitejs/vite/issues/2185
+        { find: /^~/, replacement: '' },
+      ],
+    },
+  };
 
-  if (typeof userConfig.alias === 'object') {
-    config.resolve = {
-      alias: Object.entries<string>(userConfig.alias).map(([name, target]) => ({
+  // alias: { foo:  bar } foo => bar, foo/hoo => bar/foo
+  // alias: { foo$: bar } foo => bar, foo/hoo => foo/hoo
+  if (userConfig.alias) {
+    const userAlias = Object.entries<string>(userConfig.alias).map(
+      ([name, target]) => ({
         // supports webpack suffix $ and less-loader prefix ~
         // example:
         //   - dep => ^~?dep(?=\/|$)
         //   - dep$ => ^~?dep$
         find: new RegExp(`^~?${name.replace(/(?<!\$)$/, '(?=/|$)')}`),
         replacement: target,
-      })),
-    };
+      }),
+    );
+    const wholeAlias: Alias[] = config.resolve!.alias as Alias[];
+
+    wholeAlias.unshift(...userAlias);
+    config.resolve!.alias = hoistAlias(wholeAlias);
   }
 
   return config;

packages/bundler-vite/src/config/transformer/css.ts

@@ -23,12 +23,6 @@ function getBrowserlist(targets: Record<string, string | boolean>) {
 export default (function css(userConfig) {
   const config: ReturnType<IConfigProcessor> = {
     css: { postcss: {}, preprocessorOptions: {} },
-    resolve: {
-      alias: [
-        // to support less-loader ~ for local deps, refer: https://github.com/vitejs/vite/issues/2185
-        { find: /^~/, replacement: '' },
-      ],
-    },
   };
 
   config.css!.postcss = {