Fix alias dirname error (umijs#171)

* fix: alias dirname error

* chore: code style

* feat: getRealFile

* chore: code style

packages/bundler-esbuild/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@umijs/bundler-utils": "4.0.0-beta.5",
     "@umijs/utils": "4.0.0-beta.5",
+    "enhanced-resolve": "5.8.3",
     "less": "4.1.2"
   },
   "devDependencies": {

packages/bundler-esbuild/src/build.test.ts

@@ -10,8 +10,16 @@ const EXISTS = '1';
 
 const expects: Record<string, Function> = {
   alias({ files }: IOpts) {
-    expect(files['index.js']).toContain(`var a = "react";`);
-    expect(files['index.js']).toContain(`var something = "happy";`);
+    // import('foo') > import ('/path/foo.js')
+    expect(files['index.js']).toContain(`console.log("foo");`);
+    // import('dir') > import ('/path/dir/index.js')
+    expect(files['index.js']).toContain(`console.log("dir");`);
+    // import('dir/bar') > import ('/path/dir/bar.js')
+    expect(files['index.js']).toContain(`console.log("bar");`);
+    // import('less') > import ('/path/less.ts')
+    expect(files['index.js']).toContain(`console.log("less");`);
+    // import('less/bower') > import ('less/bower.json') 没匹配上走默认
+    expect(files['index.js']).toContain(`"dist/less.js"`);
   },
   externals({ files }: IOpts) {
     expect(files['index.js']).toContain(`module.export = React;`);

packages/bundler-esbuild/src/build.ts

@@ -44,7 +44,7 @@ export async function build(opts: IOpts) {
         javascriptEnabled: true,
         ...opts.config.lessLoader,
       }),
-      alias(opts.config.alias),
+      alias({ cwd: opts.cwd, ...opts.config.alias }),
       externals(opts.config.externals),
     ],
     define: {

packages/bundler-esbuild/src/fixtures/alias/config.ts

@@ -1,7 +1,8 @@
 import { join } from 'path';
 export default {
   alias: {
-    react: require.resolve('./react.ts'),
-    some: join(__dirname,'some'),
+    foo: './path/foo',
+    dir: join(__dirname, 'path', 'dir'),
+    less$: join(__dirname, 'path', 'less'),
   },
 };

packages/bundler-esbuild/src/fixtures/alias/index.ts

@@ -1,6 +1,15 @@
 // @ts-ignore
-import react from 'react';
+import less from 'less';
 // @ts-ignore
-import something from 'some/thing.ts';
-console.log(react);
-console.log(something);
+import bower from 'less/bower';
+// @ts-ignore
+import foo from 'foo';
+// @ts-ignore
+import dir from 'dir';
+// @ts-ignore
+import bar from 'dir/bar';
+console.log(less);
+console.log(bower);
+console.log(foo);
+console.log(bar);
+console.log(dir);

packages/bundler-esbuild/src/fixtures/alias/path/dir/bar.js

@@ -0,0 +1 @@
+console.log('bar');

packages/bundler-esbuild/src/fixtures/alias/path/dir/index.js

@@ -0,0 +1 @@
+console.log('dir');

packages/bundler-esbuild/src/fixtures/alias/path/foo.js

@@ -0,0 +1 @@
+console.log('foo');

packages/bundler-esbuild/src/fixtures/alias/path/less.ts

@@ -0,0 +1 @@
+console.log('less');

packages/bundler-esbuild/src/plugins/alias.ts

@@ -1,5 +1,41 @@
 import { Plugin } from '@umijs/bundler-utils/compiled/esbuild';
 import { winPath } from '@umijs/utils';
+import assert from 'assert';
+import enhancedResolve from 'enhanced-resolve';
+import { dirname } from 'path';
+
+const getRealFile = async (cwd: string, file: string) => {
+  try {
+    return await resolve(cwd, file);
+  } catch (e) {
+    return null;
+  }
+};
+const resolver = enhancedResolve.create({
+  mainFields: ['module', 'browser', 'main'],
+  extensions: [
+    '.json',
+    '.js',
+    '.jsx',
+    '.ts',
+    '.tsx',
+    '.cjs',
+    '.mjs',
+    '.cjsx',
+    '.mjsx',
+  ],
+  // TODO: support exports
+  // tried to add exports, but it don't work with swr
+  exportsFields: [],
+});
+
+async function resolve(context: string, path: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    resolver(context, path, (err: Error, result: string) =>
+      err ? reject(err) : resolve(result),
+    );
+  });
+}
 
 // https://esbuild.github.io/plugins/#resolve-callbacks
 export default (options?: Record<string, string>): Plugin => {
@@ -10,24 +46,27 @@ export default (options?: Record<string, string>): Plugin => {
         return;
       }
       Object.keys(options).forEach((key) => {
-        // import react from 'react';
-        onResolve({ filter: new RegExp(`^${key}$`) }, (args) => {
-          return {
-            path: winPath(args.path).replace(
-              new RegExp(`^${key}$`),
-              options[key],
-            ),
-          };
-        });
-        // import abc from 'react/abc';
-        // import abc from 'react/abc.js';
-        onResolve({ filter: new RegExp(`^${key}\\/.*$`) }, (args) => {
-          return {
-            path: winPath(args.path).replace(
-              new RegExp(`^${key}`),
-              options[key],
-            ),
-          };
+        onResolve({ filter: new RegExp(`^${key}`) }, async (args) => {
+          const dir = dirname(args.path);
+          try {
+            const realFile = await getRealFile(
+              options.cwd,
+              winPath(args.path).replace(new RegExp(`^${key}`), options[key]),
+            );
+            assert(realFile, `filePath not found of ${args.path}`);
+            return {
+              path: realFile,
+            };
+          } catch (error: any) {
+            return {
+              errors: [
+                {
+                  text: error.message,
+                },
+              ],
+              resolveDir: dir,
+            };
+          }
         });
       });
     },