From 15640c88edf7d545000d2333b40a24610df74aa8 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 22 Sep 2016 23:46:51 +0100 Subject: [PATCH] Eject .babelrc instead of separate configs Fixes #410, #674 --- packages/react-scripts/.babelrc | 3 +++ packages/react-scripts/config/babel.dev.js | 27 ------------------- packages/react-scripts/config/babel.prod.js | 18 ------------- .../react-scripts/config/jest/transform.js | 7 +++-- .../config/webpack.config.dev.js | 15 ++++++++++- .../config/webpack.config.prod.js | 7 ++++- packages/react-scripts/package.json | 1 + packages/react-scripts/scripts/eject.js | 8 +++--- packages/react-scripts/scripts/test.js | 3 ++- .../scripts/utils/createJestConfig.js | 8 ++++-- 10 files changed, 39 insertions(+), 58 deletions(-) create mode 100644 packages/react-scripts/.babelrc delete mode 100644 packages/react-scripts/config/babel.dev.js delete mode 100644 packages/react-scripts/config/babel.prod.js diff --git a/packages/react-scripts/.babelrc b/packages/react-scripts/.babelrc new file mode 100644 index 00000000000..ad8e03a8248 --- /dev/null +++ b/packages/react-scripts/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["react-app"] +} \ No newline at end of file diff --git a/packages/react-scripts/config/babel.dev.js b/packages/react-scripts/config/babel.dev.js deleted file mode 100644 index f3ccd89ed40..00000000000 --- a/packages/react-scripts/config/babel.dev.js +++ /dev/null @@ -1,27 +0,0 @@ -// @remove-on-eject-begin -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ -// @remove-on-eject-end - -var findCacheDir = require('find-cache-dir'); - -module.exports = { - // Don't try to find .babelrc because we want to force this configuration. - babelrc: false, - // This is a feature of `babel-loader` for webpack (not Babel itself). - // It enables caching results in ./node_modules/.cache/react-scripts/ - // directory for faster rebuilds. We use findCacheDir() because of: - // https://github.com/facebookincubator/create-react-app/issues/483 - cacheDirectory: findCacheDir({ - name: 'react-scripts' - }), - presets: [ - require.resolve('babel-preset-react-app') - ] -}; diff --git a/packages/react-scripts/config/babel.prod.js b/packages/react-scripts/config/babel.prod.js deleted file mode 100644 index 8ed8e1e3c7d..00000000000 --- a/packages/react-scripts/config/babel.prod.js +++ /dev/null @@ -1,18 +0,0 @@ -// @remove-on-eject-begin -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ -// @remove-on-eject-end - -module.exports = { - // Don't try to find .babelrc because we want to force this configuration. - babelrc: false, - presets: [ - require.resolve('babel-preset-react-app') - ] -}; diff --git a/packages/react-scripts/config/jest/transform.js b/packages/react-scripts/config/jest/transform.js index 3a085e93e65..11a0149f97d 100644 --- a/packages/react-scripts/config/jest/transform.js +++ b/packages/react-scripts/config/jest/transform.js @@ -1,4 +1,3 @@ -// @remove-on-eject-begin /** * Copyright (c) 2014-present, Facebook, Inc. All rights reserved. * @@ -6,9 +5,9 @@ * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ -// @remove-on-eject-end -const babelDev = require('../babel.dev'); const babelJest = require('babel-jest'); -module.exports = babelJest.createTransformer(babelDev); +module.exports = babelJest.createTransformer({ + presets: [require.resolve('babel-preset-react-app')] +}); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index f08fcdcb7dc..d756c9142a4 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -12,6 +12,7 @@ var path = require('path'); var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); +var findCacheDir = require('find-cache-dir'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var InterpolateHtmlPlugin = require('../scripts/utils/InterpolateHtmlPlugin'); @@ -118,7 +119,19 @@ module.exports = { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', - query: require('./babel.dev') + query: { + // @remove-on-eject-begin + babelrc: false, + presets: [require.resolve('babel-preset-react-app')], + // @remove-on-eject-end + // This is a feature of `babel-loader` for webpack (not Babel itself). + // It enables caching results in ./node_modules/.cache/react-scripts/ + // directory for faster rebuilds. We use findCacheDir() because of: + // https://github.com/facebookincubator/create-react-app/issues/483 + cacheDirectory: findCacheDir({ + name: 'react-scripts' + }) + } }, // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3db7831be1e..8087bf7d0d9 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -119,7 +119,12 @@ module.exports = { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', - query: require('./babel.prod') + // @remove-on-eject-begin + query: { + babelrc: false, + presets: [require.resolve('babel-preset-react-app')], + }, + // @remove-on-eject-end }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index d31c45b0fe6..4779f18eee1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -11,6 +11,7 @@ "url": "https://github.com/facebookincubator/create-react-app/issues" }, "files": [ + ".babelrc", ".eslintrc", "bin", "config", diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index dd18cfb6a21..2fdbc2d2b1e 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -29,9 +29,8 @@ prompt( var ownPath = path.join(__dirname, '..'); var appPath = path.join(ownPath, '..', '..'); var files = [ + '.babelrc', '.eslintrc', - path.join('config', 'babel.dev.js'), - path.join('config', 'babel.prod.js'), path.join('config', 'flow', 'css.js.flow'), path.join('config', 'flow', 'file.js.flow'), path.join('config', 'paths.js'), @@ -41,7 +40,6 @@ prompt( path.join('config', 'webpack.config.prod.js'), path.join('config', 'jest', 'CSSStub.js'), path.join('config', 'jest', 'FileStub.js'), - path.join('config', 'jest', 'transform.js'), path.join('scripts', 'build.js'), path.join('scripts', 'start.js'), path.join('scripts', 'utils', 'checkRequiredFiles.js'), @@ -110,7 +108,9 @@ prompt( // Add Jest config appPackage.jest = createJestConfig( - filePath => path.join('', filePath) + filePath => path.join('', filePath), + null, + true ); console.log('Writing package.json'); diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index 9ff834bcd17..d297e2d0c4c 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -24,7 +24,8 @@ if (!process.env.CI) { argv.push('--config', JSON.stringify(createJestConfig( relativePath => path.resolve(__dirname, '..', relativePath), - path.resolve(paths.appSrc, '..') + path.resolve(paths.appSrc, '..'), + false ))); jest.run(argv); diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index ae5ed4f8596..d20a221ab40 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -12,7 +12,7 @@ const pathExists = require('path-exists'); const paths = require('../../config/paths'); -module.exports = (resolve, rootDir) => { +module.exports = (resolve, rootDir, isEjecting) => { const setupFiles = [resolve('config/polyfills.js')]; if (pathExists.sync(paths.testsSetup)) { // Use this instead of `paths.testsSetup` to avoid putting @@ -26,7 +26,6 @@ module.exports = (resolve, rootDir) => { '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'), '^.+\\.css$': resolve('config/jest/CSSStub.js') }, - scriptPreprocessor: resolve('config/jest/transform.js'), setupFiles: setupFiles, testPathIgnorePatterns: ['/(build|docs|node_modules)/'], testEnvironment: 'node', @@ -35,5 +34,10 @@ module.exports = (resolve, rootDir) => { if (rootDir) { config.rootDir = rootDir; } + if (!isEjecting) { + // This is unnecessary after ejecting because Jest + // will just use .babelrc in the project folder. + config.scriptPreprocessor = resolve('config/jest/transform.js'); + } return config; };