fix: resolve browser field in package.json (vitejs#301)

Fix: vitejs#294

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'
     }
   }
 }

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"
   }
 }

playground/resolve-browser-field/out/cjs.node.js

@@ -0,0 +1 @@
+export default 'fail'

playground/resolve-browser-field/out/esm.browser.js

@@ -0,0 +1 @@
+export default 'success'

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"
+  }
+}

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 ""

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']

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)
+}

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) {