Support source field in package.json to enable babel on symlinked modules (#1101)

Author: devongovett

src/Resolver.js

@@ -2,8 +2,10 @@ const builtins = require('./builtins');
 const path = require('path');
 const glob = require('glob');
 const fs = require('./utils/fs');
+const micromatch = require('micromatch');
 
 const EMPTY_SHIM = require.resolve('./builtins/_empty');
+const GLOB_RE = /[*+{}]/;
 
 /**
  * This resolver implements a modified version of the node_modules resolution algorithm:
@@ -36,7 +38,7 @@ class Resolver {
     }
 
     // Check if this is a glob
-    if (/[*+{}]/.test(filename) && glob.hasMagic(filename)) {
+    if (GLOB_RE.test(filename) && glob.hasMagic(filename)) {
       return {path: path.resolve(path.dirname(parent), filename)};
     }
 
@@ -251,16 +253,30 @@ class Resolver {
     pkg.pkgfile = file;
     pkg.pkgdir = dir;
 
+    // If the package has a `source` field, check if it is behind a symlink.
+    // If so, we treat the module as source code rather than a pre-compiled module.
+    if (pkg.source) {
+      let realpath = await fs.realpath(file);
+      if (realpath === file) {
+        delete pkg.source;
+      }
+    }
+
     this.packageCache.set(file, pkg);
     return pkg;
   }
 
   getPackageMain(pkg) {
     // libraries like d3.js specifies node.js specific files in the "main" which breaks the build
-    // we use the "module" or "jsnext:main" field to get the full dependency tree if available
-    let main = [pkg.module, pkg['jsnext:main'], pkg.browser, pkg.main].find(
-      entry => typeof entry === 'string'
-    );
+    // we use the "module" or "jsnext:main" field to get the full dependency tree if available.
+    // If this is a linked module with a `source` field, use that as the entry point.
+    let main = [
+      pkg.source,
+      pkg.module,
+      pkg['jsnext:main'],
+      pkg.browser,
+      pkg.main
+    ].find(entry => typeof entry === 'string');
 
     // Default to index file if no main field find
     if (!main || main === '.' || main === './') {
@@ -307,16 +323,17 @@ class Resolver {
   }
 
   resolvePackageAliases(filename, pkg) {
-    // Resolve aliases in the package.alias and package.browser fields.
-    if (pkg) {
-      return (
-        this.getAlias(filename, pkg.pkgdir, pkg.alias) ||
-        this.getAlias(filename, pkg.pkgdir, pkg.browser) ||
-        filename
-      );
+    if (!pkg) {
+      return filename;
     }
 
-    return filename;
+    // Resolve aliases in the package.source, package.alias, and package.browser fields.
+    return (
+      this.getAlias(filename, pkg.pkgdir, pkg.source) ||
+      this.getAlias(filename, pkg.pkgdir, pkg.alias) ||
+      this.getAlias(filename, pkg.pkgdir, pkg.browser) ||
+      filename
+    );
   }
 
   getAlias(filename, dir, aliases) {
@@ -333,7 +350,7 @@ class Resolver {
         filename = './' + filename;
       }
 
-      alias = aliases[filename];
+      alias = this.lookupAlias(aliases, filename);
     } else {
       // It is a node_module. First try the entire filename as a key.
       alias = aliases[filename];
@@ -363,6 +380,24 @@ class Resolver {
     return alias;
   }
 
+  lookupAlias(aliases, filename) {
+    // First, try looking up the exact filename
+    let alias = aliases[filename];
+    if (alias != null) {
+      return alias;
+    }
+
+    // Otherwise, try replacing glob keys
+    for (let key in aliases) {
+      if (GLOB_RE.test(key)) {
+        let re = micromatch.makeRe(key, {capture: true});
+        if (re.test(filename)) {
+          return filename.replace(re, aliases[key]);
+        }
+      }
+    }
+  }
+
   async findPackage(dir) {
     // Find the nearest package.json file within the current node_modules folder
     let root = path.parse(dir).root;

src/transforms/babel.js

@@ -89,9 +89,18 @@ async function getBabelConfig(asset) {
     return asset.babelConfig;
   }
 
-  let babelrc = await getBabelRc(asset);
-  let envConfig = await getEnvConfig(asset, !!babelrc);
-  let jsxConfig = getJSXConfig(asset, !!babelrc);
+  // Consider the module source code rather than precompiled if the resolver
+  // used the `source` field, or it is not in node_modules.
+  let isSource =
+    !!(asset.package && asset.package.source) ||
+    !asset.name.includes(NODE_MODULES);
+
+  // Try to resolve a .babelrc file. If one is found, consider the module source code.
+  let babelrc = await getBabelRc(asset, isSource);
+  isSource = isSource || !!babelrc;
+
+  let envConfig = await getEnvConfig(asset, isSource);
+  let jsxConfig = getJSXConfig(asset, isSource);
 
   // Merge the babel-preset-env config and the babelrc if needed
   if (babelrc && !shouldIgnoreBabelrc(asset.name, babelrc)) {
@@ -162,8 +171,9 @@ function getPluginName(p) {
  * Finds a .babelrc for an asset. By default, .babelrc files inside node_modules are not used.
  * However, there are some exceptions:
  *   - if `browserify.transforms` includes "babelify" in package.json (for legacy module compat)
+ *   - the `source` field in package.json is used by the resolver
  */
-async function getBabelRc(asset) {
+async function getBabelRc(asset, isSource) {
   // Support legacy browserify packages
   let browserify = asset.package && asset.package.browserify;
   if (browserify && Array.isArray(browserify.transform)) {
@@ -182,7 +192,7 @@ async function getBabelRc(asset) {
   }
 
   // If this asset is not in node_modules, always use the .babelrc
-  if (!asset.name.includes(NODE_MODULES)) {
+  if (isSource) {
     return await findBabelRc(asset);
   }
 
@@ -224,7 +234,7 @@ async function getEnvConfig(asset, isSourceModule) {
 
   // If this is the app module, the source and target will be the same, so just compile everything.
   // Otherwise, load the source engines and generate a babel-present-env config.
-  if (asset.name.includes(NODE_MODULES) && !isSourceModule) {
+  if (!isSourceModule) {
     let sourceEngines = await getTargetEngines(asset, false);
     let sourceEnv = (await getEnvPlugins(sourceEngines, false)) || targetEnv;
 
@@ -264,7 +274,7 @@ async function getEnvPlugins(targets, useBuiltIns = false) {
  */
 function getJSXConfig(asset, isSourceModule) {
   // Don't enable JSX in node_modules
-  if (asset.name.includes(NODE_MODULES) && !isSourceModule) {
+  if (!isSourceModule) {
     return null;
   }
 

src/utils/fs.js

@@ -7,6 +7,7 @@ exports.writeFile = promisify(fs.writeFile);
 exports.stat = promisify(fs.stat);
 exports.readdir = promisify(fs.readdir);
 exports.unlink = promisify(fs.unlink);
+exports.realpath = promisify(fs.realpath);
 
 exports.exists = function(filename) {
   return new Promise(resolve => {

test/integration/babel-node-modules-source-unlinked/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../.eslintrc.json",
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

test/integration/babel-node-modules-source-unlinked/index.js

@@ -0,0 +1,4 @@
+import Foo from 'foo';
+
+export {Foo};
+export class Bar {}

test/integration/babel-node-modules-source-unlinked/node_modules/foo/index.js

@@ -0,0 +1,4 @@
+{
+  "name": "parcel-test-browser-browserslist",
+  "browserslist": ["last 2 Chrome versions", "IE >= 11"]
+}

test/integration/babel-node-modules-source-unlinked/node_modules/foo/package.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../.eslintrc.json",
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

test/integration/babel-node-modules-source-unlinked/package.json

@@ -0,0 +1,4 @@
+import Foo from 'foo';
+
+export {Foo};
+export class Bar {}