From 4e914743305c5469365aec6c8a587aa6ee4382a7 Mon Sep 17 00:00:00 2001 From: Xerxes Noble Date: Fri, 8 Dec 2017 10:45:54 -0500 Subject: [PATCH 1/2] Option to target specific node_modules for babel --- packages/react-scripts/config/webpack.config.dev.js | 11 ++++++++++- packages/react-scripts/config/webpack.config.prod.js | 11 ++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c9d5ae0b295..56a9c4625a0 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -29,6 +29,10 @@ const publicPath = '/'; const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +// The list of packages in node_modules that babel will include in it's transpile. +// An array property in the apps package.json called "transpileDependencies" +const transpileDependencies = + require(paths.appPackageJson).transpileDependencies || []; // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -163,7 +167,12 @@ module.exports = { // Process JS with Babel. { test: /\.(js|jsx|mjs)$/, - include: paths.appSrc, + include: [ + paths.appSrc, + ...transpileDependencies.map(module => + path.resolve(paths.appNodeModules, module) + ), + ], loader: require.resolve('babel-loader'), options: { // @remove-on-eject-begin diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3b2a2068db2..9d6b210918b 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -35,6 +35,10 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +// The list of packages in node_modules that babel will include in it's transpile. +// An array property in the apps package.json called "transpileDependencies" +const transpileDependencies = + require(paths.appPackageJson).transpileDependencies || []; // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -170,7 +174,12 @@ module.exports = { // Process JS with Babel. { test: /\.(js|jsx|mjs)$/, - include: paths.appSrc, + include: [ + paths.appSrc, + ...transpileDependencies.map(module => + path.resolve(paths.appNodeModules, module) + ), + ], loader: require.resolve('babel-loader'), options: { // @remove-on-eject-begin From 4bb62fbe0f0f52ebb435bde641c67f61fb34a7e7 Mon Sep 17 00:00:00 2001 From: Xerxes Noble Date: Fri, 8 Dec 2017 11:45:16 -0500 Subject: [PATCH 2/2] Refactor babel include list for code style --- .../config/webpack.config.dev.js | 19 +++++++++---------- .../config/webpack.config.prod.js | 18 +++++++++--------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 56a9c4625a0..90b290e6a75 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -29,11 +29,15 @@ const publicPath = '/'; const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); -// The list of packages in node_modules that babel will include in it's transpile. +// Application package.json +const pkg = require(paths.appPackageJson); // An array property in the apps package.json called "transpileDependencies" -const transpileDependencies = - require(paths.appPackageJson).transpileDependencies || []; - +const transpileModules = pkg.transpileDependencies || []; +// The list of packages in node_modules that babel will include in it's transpile. +const babelInclude = [ + paths.appSrc, + ...transpileModules.map(m => path.resolve(paths.appNodeModules, m)), +]; // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. @@ -167,12 +171,7 @@ module.exports = { // Process JS with Babel. { test: /\.(js|jsx|mjs)$/, - include: [ - paths.appSrc, - ...transpileDependencies.map(module => - path.resolve(paths.appNodeModules, module) - ), - ], + include: babelInclude, loader: require.resolve('babel-loader'), options: { // @remove-on-eject-begin diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 9d6b210918b..48650ffc2c7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -35,10 +35,15 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); -// The list of packages in node_modules that babel will include in it's transpile. +// Application package.json +const pkg = require(paths.appPackageJson); // An array property in the apps package.json called "transpileDependencies" -const transpileDependencies = - require(paths.appPackageJson).transpileDependencies || []; +const transpileModules = pkg.transpileDependencies || []; +// The list of packages in node_modules that babel will include in it's transpile. +const babelInclude = [ + paths.appSrc, + ...transpileModules.map(m => path.resolve(paths.appNodeModules, m)), +]; // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -174,12 +179,7 @@ module.exports = { // Process JS with Babel. { test: /\.(js|jsx|mjs)$/, - include: [ - paths.appSrc, - ...transpileDependencies.map(module => - path.resolve(paths.appNodeModules, module) - ), - ], + include: babelInclude, loader: require.resolve('babel-loader'), options: { // @remove-on-eject-begin