From 28d9714f035848e61f55ddd9e85b83342094e194 Mon Sep 17 00:00:00 2001
From: csr632 <632882184@qq.com>
Date: Fri, 29 May 2020 21:42:00 +0800
Subject: [PATCH] fix: resolve browser field in package.json (#301)

Fix: #294
---
 playground/TestModuleResolve.vue              |  7 +++-
 playground/package.json                       |  1 +
 .../resolve-browser-field/out/cjs.node.js     |  1 +
 .../resolve-browser-field/out/esm.browser.js  |  1 +
 playground/resolve-browser-field/package.json |  9 +++++
 playground/yarn.lock                          |  4 +++
 src/node/build/index.ts                       |  3 +-
 src/node/resolver.ts                          | 35 ++++++++++++++++++-
 test/test.js                                  |  1 +
 9 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 playground/resolve-browser-field/out/cjs.node.js
 create mode 100644 playground/resolve-browser-field/out/esm.browser.js
 create mode 100644 playground/resolve-browser-field/package.json

diff --git a/playground/TestModuleResolve.vue b/playground/TestModuleResolve.vue
index 281701ea6ce804..cb33a453f4fe30 100644
--- a/playground/TestModuleResolve.vue
+++ b/playground/TestModuleResolve.vue
@@ -16,6 +16,9 @@
   <div class="dot-resolve" :class="dotResolve">
     filename with dot resolve: {{ dotResolve }}
   </div>
+  <div class="browser-field-resolve" :class="browserFieldResolve">
+    resolve browser field in package.json: {{ browserFieldResolve }}
+  </div>
 </template>
 
 <script>
@@ -25,6 +28,7 @@ import { add } from 'lodash-es'
 import { test } from 'conditional-exports'
 import { foo } from './util'
 import { bar } from './util/bar.util'
+import value from 'resolve-browser-field-test-package'
 
 export default {
   setup() {
@@ -34,7 +38,8 @@ export default {
       optResolve: typeof add === 'function' ? 'ok' : 'error',
       conditionalExports: test() ? 'ok' : 'error',
       indexResolve: foo() ? 'ok' : 'error',
-      dotResolve: bar() ? 'ok' : 'error'
+      dotResolve: bar() ? 'ok' : 'error',
+      browserFieldResolve: value === 'success' ? 'ok' : 'error'
     }
   }
 }
diff --git a/playground/package.json b/playground/package.json
index 799f22a07870f8..a59aff0be40369 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -8,6 +8,7 @@
     "lodash-es": "link:../node_modules/lodash-es",
     "moment": "link:../node_modules/moment",
     "rewrite-optimized-test-package": "link:./rewrite-optimized/test-package",
+    "resolve-browser-field-test-package": "link:./resolve-browser-field",
     "conditional-exports": "link:./conditional-exports"
   }
 }
diff --git a/playground/resolve-browser-field/out/cjs.node.js b/playground/resolve-browser-field/out/cjs.node.js
new file mode 100644
index 00000000000000..95090a641f78b4
--- /dev/null
+++ b/playground/resolve-browser-field/out/cjs.node.js
@@ -0,0 +1 @@
+export default 'fail'
diff --git a/playground/resolve-browser-field/out/esm.browser.js b/playground/resolve-browser-field/out/esm.browser.js
new file mode 100644
index 00000000000000..739bb26e01b765
--- /dev/null
+++ b/playground/resolve-browser-field/out/esm.browser.js
@@ -0,0 +1 @@
+export default 'success'
diff --git a/playground/resolve-browser-field/package.json b/playground/resolve-browser-field/package.json
new file mode 100644
index 00000000000000..12aa76fc87ccdc
--- /dev/null
+++ b/playground/resolve-browser-field/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "resolve-browser-field-test-package",
+  "version": "1.0.0",
+  "//": "real world example: https://github.com/axios/axios/blob/3f2ef030e001547eb06060499f8a2e3f002b5a14/package.json#L71-L73",
+  "main": "out/cjs.node.js",
+  "browser": {
+    "./out/cjs.node.js": "./out/esm.browser.js"
+  }
+}
diff --git a/playground/yarn.lock b/playground/yarn.lock
index 21df6cb7719374..ed6f79ab2d545a 100644
--- a/playground/yarn.lock
+++ b/playground/yarn.lock
@@ -14,6 +14,10 @@
   version "0.0.0"
   uid ""
 
+"resolve-browser-field-test-package@link:./resolve-browser-field":
+  version "0.0.0"
+  uid ""
+
 "rewrite-optimized-test-package@link:./rewrite-optimized/test-package":
   version "0.0.0"
   uid ""
diff --git a/src/node/build/index.ts b/src/node/build/index.ts
index 9e1eaaddc89def..ffd4762d10b550 100644
--- a/src/node/build/index.ts
+++ b/src/node/build/index.ts
@@ -115,7 +115,8 @@ export async function createBaseRollupPlugins(
       extensions: supportedExts,
       preferBuiltins: false,
       dedupe: options.rollupDedupe || [],
-      mainFields
+      mainFields,
+      browser: true
     }),
     require('@rollup/plugin-commonjs')({
       extensions: ['.js', '.cjs']
diff --git a/src/node/resolver.ts b/src/node/resolver.ts
index 6e4b2f0829564e..6668df4b317170 100644
--- a/src/node/resolver.ts
+++ b/src/node/resolver.ts
@@ -26,7 +26,7 @@ export interface InternalResolver {
 }
 
 export const supportedExts = ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
-export const mainFields = ['module', 'jsnext', 'jsnext:main', 'browser', 'main']
+export const mainFields = ['module', 'jsnext', 'jsnext:main', 'main']
 
 const defaultRequestToFile = (publicPath: string, root: string): string => {
   if (moduleRE.test(publicPath)) {
@@ -340,6 +340,19 @@ export function resolveNodeModule(
       }
     }
 
+    // resolve browser field in package.json
+    // https://github.com/defunctzombie/package-browser-field-spec
+    const browserField = pkg.browser
+    if (typeof browserField === 'string') {
+      entryPoint = browserField
+    } else if (
+      entryPoint &&
+      typeof browserField === 'object' &&
+      browserField !== null
+    ) {
+      entryPoint = mapWithBrowserField(entryPoint, browserField)
+    }
+
     debug(`(node_module entry) ${id} -> ${entryPoint}`)
 
     // save resolved entry file path using the deep import path as key
@@ -387,3 +400,23 @@ export function resolveNodeModuleFile(
     // error will be reported downstream
   }
 }
+
+/**
+ * given a relative path in pkg dir,
+ * return a relative path in pkg dir,
+ * mapped with the "map" object
+ */
+function mapWithBrowserField(
+  relativePathInPkgDir: string,
+  map: Record<string, string>
+) {
+  const normalized = path.normalize(relativePathInPkgDir)
+  const foundEntry = Object.entries(map).find(([from]) => {
+    return path.normalize(from) === normalized
+  })
+  if (!foundEntry) {
+    return normalized
+  }
+  const [, to] = foundEntry
+  return path.normalize(to)
+}
diff --git a/test/test.js b/test/test.js
index 026f245353b85a..10f063585e9efb 100644
--- a/test/test.js
+++ b/test/test.js
@@ -108,6 +108,7 @@ describe('vite', () => {
       expect(await getText('.module-resolve-conditional')).toMatch('ok')
       expect(await getText('.index-resolve')).toMatch('ok')
       expect(await getText('.dot-resolve')).toMatch('ok')
+      expect(await getText('.browser-field-resolve')).toMatch('ok')
     })
 
     if (!isBuild) {