feat(gatsby): enable babel-loader for all dependencies (#14111)

Author: wardpeet

packages/gatsby/src/utils/__tests__/__snapshots__/webpack-utils.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`webpack utils js returns default values without any options 1`] = `
+Object {
+  "exclude": /core-js\\|event-source-polyfill\\|webpack-hot-middleware\\\\/client/,
+  "test": /\\\\\\.\\(js\\|mjs\\|jsx\\)\\$/,
+  "type": "javascript/auto",
+  "use": Array [
+    Object {
+      "loader": "<PROJECT_ROOT>/packages/gatsby/src/utils/babel-loader.js",
+      "options": Object {},
+    },
+  ],
+}
+`;
+
+exports[`webpack utils js returns the correct exclude paths 1`] = `
+Object {
+  "exclude": /core-js\\|event-source-polyfill\\|webpack-hot-middleware\\\\/client\\|node_modules/,
+  "test": /\\\\\\.\\(js\\|mjs\\|jsx\\)\\$/,
+  "type": "javascript/auto",
+  "use": Array [
+    Object {
+      "loader": "<PROJECT_ROOT>/packages/gatsby/src/utils/babel-loader.js",
+      "options": Object {},
+    },
+  ],
+}
+`;

packages/gatsby/src/utils/__tests__/webpack-utils.js

@@ -11,19 +11,23 @@ beforeAll(async () => {
 })
 
 describe(`webpack utils`, () => {
-  describe(`mjs`, () => {
-    it(`adds .mjs rule`, () => {
-      expect(config.rules.mjs).toEqual(expect.any(Function))
+  describe(`js`, () => {
+    it(`adds .js rule`, () => {
+      expect(config.rules.js).toEqual(expect.any(Function))
     })
 
-    it(`returns correct rule`, () => {
-      const rule = config.rules.mjs()
+    it(`returns default values without any options`, () => {
+      const rule = config.rules.js()
 
-      expect(rule).toEqual({
-        include: /node_modules/,
-        test: /\.mjs$/,
-        type: `javascript/auto`,
+      expect(rule).toMatchSnapshot()
+    })
+
+    it(`returns the correct exclude paths`, () => {
+      const rule = config.rules.js({
+        exclude: [`node_modules`],
       })
+
+      expect(rule).toMatchSnapshot()
     })
   })
 })

packages/gatsby/src/utils/webpack-utils.js

@@ -293,34 +293,20 @@ module.exports = async ({
    * JavaScript loader via babel, excludes node_modules
    */
   {
-    let js = (options = {}) => {
-      return {
-        test: /\.jsx?$/,
-        exclude: vendorRegex,
-        use: [loaders.js(options)],
-      }
-    }
-
-    rules.js = js
-  }
+    let js = ({ exclude = [], ...options } = {}) => {
+      const excludeRegex = [
+        `core-js|event-source-polyfill|webpack-hot-middleware/client`,
+      ].concat(exclude)
 
-  /**
-   * mjs loader:
-   * webpack 4 has issues automatically dealing with
-   * the .mjs extension, thus we need to explicitly
-   * add this rule to use the default webpack js loader
-   */
-  {
-    let mjs = (options = {}) => {
       return {
-        test: /\.mjs$/,
-        include: /node_modules/,
+        test: /\.(js|mjs|jsx)$/,
+        exclude: new RegExp(excludeRegex.join(`|`)),
         type: `javascript/auto`,
-        ...options,
+        use: [loaders.js(options)],
       }
     }
 
-    rules.mjs = mjs
+    rules.js = js
   }
 
   {

packages/gatsby/src/utils/webpack.config.js

@@ -245,12 +245,19 @@ module.exports = async (program, directory, suppliedStage) => {
     }
   }
 
-  function getModule(config) {
+  function getModule() {
+    const jsOptions = {}
+
+    // Speedup 🏎️💨 the build! We only include transpilation of node_modules on production builds
+    // TODO create gatsby plugin to enable this behaviour on develop (only when people are requesting this feature)
+    if (stage === `develop`) {
+      jsOptions.exclude = [`node_modules`]
+    }
+
     // Common config for every env.
     // prettier-ignore
     let configRules = [
-      rules.mjs(),
-      rules.js(),
+      rules.js(jsOptions),
       rules.yaml(),
       rules.fonts(),
       rules.images(),