Check browserslist prop in package.json for environments (#1053)

src/utils/getTargetEngines.js

@@ -66,7 +66,19 @@ async function getTargetEngines(asset, isTargetApp) {
 
   // Parse browser targets
   if (targets.browsers) {
-    targets.browsers = browserslist(targets.browsers).sort();
+    if (
+      typeof targets.browsers === 'object' &&
+      !Array.isArray(targets.browsers)
+    ) {
+      let env = asset.options.production
+        ? 'production'
+        : process.env.NODE_ENV || 'development';
+      targets.browsers = targets.browsers[env] || targets.browsers.defaults;
+    }
+
+    if (targets.browsers) {
+      targets.browsers = browserslist(targets.browsers).sort();
+    }
   }
 
   // Dont compile if we couldn't find any targets
@@ -92,13 +104,9 @@ async function loadBrowserslist(asset, path) {
     path,
     load: false
   });
-  if (config) {
-    let browsers = browserslist.readConfig(config);
-    if (typeof browsers === 'object' && !Array.isArray(browsers)) {
-      browsers = browsers[process.env.NODE_ENV] || browsers.defaults;
-    }
 
-    return browsers;
+  if (config) {
+    return browserslist.readConfig(config);
   }
 }
 

test/integration/babel-browserslist-multiple-env-as-string/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../.eslintrc.json",
+  "parserOptions": {
+    "sourceType": "script"
+  },
+  "rules": {
+    "no-unused-vars": "off"
+  }
+}

test/integration/babel-browserslist-multiple-env-as-string/index.js

@@ -0,0 +1,7 @@
+const a = {
+  prop1: '1',
+  prop2: '2',
+  prop3: '3'
+};
+
+const {prop1, prop2, prop3} = a;

test/integration/babel-browserslist-multiple-env-as-string/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "parcel-test-browser-browserslist",
+  "browserslist": {
+    "test": "chrome 68",
+    "production": "last 2 Chrome versions, IE >= 11"
+  }
+}

test/integration/babel-browserslist-multiple-env/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../.eslintrc.json",
+  "parserOptions": {
+    "sourceType": "script"
+  },
+  "rules": {
+    "no-unused-vars": "off"
+  }
+}

test/integration/babel-browserslist-multiple-env/index.js

@@ -0,0 +1,7 @@
+const a = {
+  prop1: '1',
+  prop2: '2',
+  prop3: '3'
+};
+
+const {prop1, prop2, prop3} = a;

test/integration/babel-browserslist-multiple-env/package.json

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

test/javascript.js

@@ -628,6 +628,38 @@ describe('javascript', function() {
     assert(!file.includes('class Bar {}'));
   });
 
+  it('should support compiling with babel using browserslist for different environments', async function() {
+    async function testBrowserListMultipleEnv(projectBasePath) {
+      // Transpiled destructuring, like r = p.prop1, o = p.prop2, a = p.prop3;
+      const prodRegExp = /\w ?= ?\w\.prop1, ?\w ?= ?\w\.prop2, ?\w ?= ?\w\.prop3;/;
+      // ES6 Destructuring, like in the source;
+      const devRegExp = /const ?{prop1, ?prop2, ?prop3} ?= ?.*/;
+      let file;
+      // Dev build test
+      await bundle(__dirname + projectBasePath + '/index.js');
+      file = fs.readFileSync(__dirname + '/dist/index.js', 'utf8');
+      assert(devRegExp.test(file) === true);
+      assert(prodRegExp.test(file) === false);
+      // Prod build test
+      await bundle(
+        __dirname + '/integration/babel-browserslist-multiple-env/index.js',
+        {
+          production: true
+        }
+      );
+      file = fs.readFileSync(__dirname + '/dist/index.js', 'utf8');
+      assert(prodRegExp.test(file) === true);
+      assert(devRegExp.test(file) === false);
+    }
+
+    await testBrowserListMultipleEnv(
+      '/integration/babel-browserslist-multiple-env'
+    );
+    await testBrowserListMultipleEnv(
+      '/integration/babel-browserslist-multiple-env-as-string'
+    );
+  });
+
   it('should not compile node_modules by default', async function() {
     await bundle(__dirname + '/integration/babel-node-modules/index.js');