Skip to content

Commit ff0da30

Browse files
committed
Check and use if exist local babel config (.babelrc or packegs.json babel attr)
1 parent 4d7b754 commit ff0da30

File tree

8 files changed

+66
-9
lines changed

8 files changed

+66
-9
lines changed

packages/react-scripts/config/paths.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ var nodePaths = (process.env.NODE_PATH || '')
4242

4343
// config after eject: we're in ./config/
4444
module.exports = {
45+
babelrc: resolveApp('.babelrc'),
4546
appBuild: resolveApp('build'),
4647
appPublic: resolveApp('public'),
4748
appHtml: resolveApp('public/index.html'),
@@ -62,6 +63,7 @@ function resolveOwn(relativePath) {
6263

6364
// config before eject: we're in ./node_modules/react-scripts/config/
6465
module.exports = {
66+
babelrc: resolveApp('.babelrc'),
6567
appBuild: resolveApp('build'),
6668
appPublic: resolveApp('public'),
6769
appHtml: resolveApp('public/index.html'),
@@ -79,6 +81,7 @@ module.exports = {
7981
// config before publish: we're in ./packages/react-scripts/config/
8082
if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
8183
module.exports = {
84+
babelrc: resolveOwn('../template/.babelrc'),
8285
appBuild: resolveOwn('../../../build'),
8386
appPublic: resolveOwn('../template/public'),
8487
appHtml: resolveOwn('../template/public/index.html'),

packages/react-scripts/config/webpack.config.dev.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ var paths = require('./paths');
2323
var path = require('path');
2424
// @remove-on-eject-end
2525

26+
// @remove-on-eject-begin
27+
var isLocalBabelExists = require('../utils/isLocalBabelExists');
28+
var localBabelExists = isLocalBabelExists();
29+
// @remove-on-eject-end
30+
2631
// Webpack uses `publicPath` to determine where the app is being served from.
2732
// In development, we always serve from the root. This makes config easier.
2833
var publicPath = '/';
@@ -147,8 +152,8 @@ module.exports = {
147152
loader: 'babel',
148153
query: {
149154
// @remove-on-eject-begin
150-
babelrc: false,
151-
presets: [require.resolve('babel-preset-react-app')],
155+
babelrc: localBabelExists,
156+
presets: !localBabelExists ? [require.resolve('babel-preset-react-app')] : null,
152157
// @remove-on-eject-end
153158
// This is a feature of `babel-loader` for webpack (not Babel itself).
154159
// It enables caching results in ./node_modules/.cache/babel-loader/

packages/react-scripts/config/webpack.config.prod.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ var getClientEnvironment = require('./env');
2424
var path = require('path');
2525
// @remove-on-eject-end
2626

27+
// @remove-on-eject-begin
28+
var isLocalBabelExists = require('../utils/isLocalBabelExists');
29+
var localBabelExists = isLocalBabelExists();
30+
// @remove-on-eject-end
31+
2732
function ensureSlash(path, needsSlash) {
2833
var hasSlash = path.endsWith('/');
2934
if (hasSlash && !needsSlash) {
@@ -153,8 +158,8 @@ module.exports = {
153158
loader: 'babel',
154159
// @remove-on-eject-begin
155160
query: {
156-
babelrc: false,
157-
presets: [require.resolve('babel-preset-react-app')],
161+
babelrc: localBabelExists,
162+
presets: !localBabelExists ? [require.resolve('babel-preset-react-app')] : null,
158163
},
159164
// @remove-on-eject-end
160165
},

packages/react-scripts/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"promise": "7.1.1",
5858
"react-dev-utils": "^0.4.2",
5959
"recursive-readdir": "2.1.0",
60+
"semver": "^5.3.0",
6061
"strip-ansi": "3.0.1",
6162
"style-loader": "0.13.1",
6263
"url-loader": "0.5.7",

packages/react-scripts/scripts/eject.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ var createJestConfig = require('../utils/createJestConfig');
1111
var fs = require('fs-extra');
1212
var path = require('path');
1313
var paths = require('../config/paths');
14+
var isLocalBabelExists = require('../utils/isLocalBabelExists');
1415
var prompt = require('react-dev-utils/prompt');
1516
var spawnSync = require('cross-spawn').sync;
1617
var chalk = require('chalk');
@@ -128,10 +129,11 @@ prompt(
128129
true
129130
);
130131

131-
// Add Babel config
132-
133-
console.log(' Adding ' + cyan('Babel') + ' preset');
134-
appPackage.babel = babelConfig;
132+
// Add Babel config if there is no local babel config
133+
if (isLocalBabelExists()) {
134+
console.log(' Adding ' + cyan('Babel') + ' preset');
135+
appPackage.babel = babelConfig;
136+
}
135137

136138
// Add ESlint config
137139
console.log(' Adding ' + cyan('ESLint') +' configuration');

packages/react-scripts/scripts/start.js

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
* of patent rights can be found in the PATENTS file in the same directory.
99
*/
1010
// @remove-on-eject-end
11-
1211
process.env.NODE_ENV = 'development';
1312

1413
// Load environment variables from .env file. Suppress warnings using silent
@@ -19,6 +18,7 @@ require('dotenv').config({silent: true});
1918

2019
var chalk = require('chalk');
2120
var webpack = require('webpack');
21+
var semver = require('semver');
2222
var WebpackDevServer = require('webpack-dev-server');
2323
var historyApiFallback = require('connect-history-api-fallback');
2424
var httpProxyMiddleware = require('http-proxy-middleware');
@@ -30,9 +30,15 @@ var getProcessForPort = require('react-dev-utils/getProcessForPort');
3030
var openBrowser = require('react-dev-utils/openBrowser');
3131
var prompt = require('react-dev-utils/prompt');
3232
var fs = require('fs');
33+
var fse = require('fs-extra');
3334
var config = require('../config/webpack.config.dev');
3435
var paths = require('../config/paths');
3536

37+
// @remove-on-eject-begin
38+
var isLocalBabelExists = require('../utils/isLocalBabelExists');
39+
var babelPresetReactApp = require('babel-preset-react-app/package.json');
40+
// @remove-on-eject-end
41+
3642
var useYarn = fs.existsSync(paths.yarnLockFile);
3743
var cli = useYarn ? 'yarn' : 'npm';
3844
var isInteractive = process.stdout.isTTY;
@@ -42,6 +48,24 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
4248
process.exit(1);
4349
}
4450

51+
// @remove-on-eject-begin
52+
var wrongLocalBabelPresetReactAppVersion = false;
53+
54+
if (isLocalBabelExists()) {
55+
var appPackageJson = fse.readJsonSync(paths.appPackageJson);
56+
var deps = appPackageJson.dependencies;
57+
var devDeps = appPackageJson.devDependencies;
58+
var reactAppPresetName = babelPresetReactApp.name;
59+
60+
var localBabelPresetReactAppVersion = deps[reactAppPresetName] || devDeps[reactAppPresetName]
61+
62+
if (localBabelPresetReactAppVersion &&
63+
!semver.satisfies(babelPresetReactApp.version, localBabelPresetReactAppVersion)) {
64+
wrongLocalBabelPresetReactAppVersion = true;
65+
}
66+
}
67+
// @remove-on-eject-end
68+
4569
// Tools like Cloud9 rely on this.
4670
var DEFAULT_PORT = process.env.PORT || 3000;
4771
var compiler;
@@ -105,6 +129,12 @@ function setupCompiler(host, port, protocol) {
105129
console.log('Note that the development build is not optimized.');
106130
console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
107131
console.log();
132+
// @remove-on-eject-begin
133+
if (wrongLocalBabelPresetReactAppVersion) {
134+
console.log(chalk.yellow('Note that the local package "' + babelPresetReactApp.name + '" version is outdated.'));
135+
}
136+
// @remove-on-eject-end
137+
console.log();
108138
isFirstCompile = false;
109139
}
110140

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-app"]
3+
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var fse = require('fs-extra');
2+
var fs = require('fs');
3+
var paths = require('../config/paths');
4+
5+
module.exports = () => {
6+
var appPackageJson = fse.readJsonSync(paths.appPackageJson);
7+
return appPackageJson.hasOwnProperty('babel') || fs.existsSync(paths.babelrc);
8+
};

0 commit comments

Comments
 (0)