Skip to content

Commit f7bba1d

Browse files
jsdeveljsdevel
committed
CRA_BABEL_PRESET_FILE to handle optional dependencies.
* This will allow for optional babel dependencies to be added without ejecting cra. * CRA_BABEL_PRESET_FILE=relative/path/to/babel/preset can be added to package.json.
1 parent 3690495 commit f7bba1d

File tree

2 files changed

+128
-119
lines changed

2 files changed

+128
-119
lines changed

‎packages/babel-preset-react-app/index.js

+126-118
Original file line numberDiff line numberDiff line change
@@ -8,131 +8,139 @@
88
*/
99
'use strict';
1010

11-
const plugins = [
12-
// class { handleClick = () => { } }
13-
require.resolve('babel-plugin-transform-class-properties'),
14-
// The following two plugins use Object.assign directly, instead of Babel's
15-
// extends helper. Note that this assumes `Object.assign` is available.
16-
// { ...todo, completed: true }
17-
[
18-
require.resolve('babel-plugin-transform-object-rest-spread'),
19-
{
20-
useBuiltIns: true,
21-
},
22-
],
23-
// Transforms JSX
24-
[
25-
require.resolve('babel-plugin-transform-react-jsx'),
26-
{
27-
useBuiltIns: true,
28-
},
29-
],
30-
// Polyfills the runtime needed for async/await and generators
31-
[
32-
require.resolve('babel-plugin-transform-runtime'),
33-
{
34-
helpers: false,
35-
polyfill: false,
36-
regenerator: true,
37-
},
38-
],
39-
];
11+
const path = require('path');
4012

41-
// This is similar to how `env` works in Babel:
42-
// https://babeljs.io/docs/usage/babelrc/#env-option
43-
// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
44-
// https://github.com/babel/babel/issues/4539
45-
// https://github.com/facebookincubator/create-react-app/issues/720
46-
// It’s also nice that we can enforce `NODE_ENV` being specified.
47-
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
48-
if (env !== 'development' && env !== 'test' && env !== 'production') {
49-
throw new Error(
50-
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
51-
'`BABEL_ENV` environment variables. Valid values are "development", ' +
52-
'"test", and "production". Instead, received: ' +
53-
JSON.stringify(env) +
54-
'.'
55-
);
56-
}
13+
if (process.env.CRA_BABEL_PRESET_FILE) {
14+
let presetFile = path.resolve(process.cwd(),
15+
process.env.CRA_BABEL_PRESET_FILE);
16+
module.exports = require(presetFile);
17+
} else {
18+
const plugins = [
19+
// class { handleClick = () => { } }
20+
require.resolve('babel-plugin-transform-class-properties'),
21+
// The following two plugins use Object.assign directly, instead of Babel's
22+
// extends helper. Note that this assumes `Object.assign` is available.
23+
// { ...todo, completed: true }
24+
[
25+
require.resolve('babel-plugin-transform-object-rest-spread'),
26+
{
27+
useBuiltIns: true,
28+
},
29+
],
30+
// Transforms JSX
31+
[
32+
require.resolve('babel-plugin-transform-react-jsx'),
33+
{
34+
useBuiltIns: true,
35+
},
36+
],
37+
// Polyfills the runtime needed for async/await and generators
38+
[
39+
require.resolve('babel-plugin-transform-runtime'),
40+
{
41+
helpers: false,
42+
polyfill: false,
43+
regenerator: true,
44+
},
45+
],
46+
];
5747

58-
if (env === 'development' || env === 'test') {
59-
// The following two plugins are currently necessary to make React warnings
60-
// include more valuable information. They are included here because they are
61-
// currently not enabled in babel-preset-react. See the below threads for more info:
62-
// https://github.com/babel/babel/issues/4702
63-
// https://github.com/babel/babel/pull/3540#issuecomment-228673661
64-
// https://github.com/facebookincubator/create-react-app/issues/989
65-
plugins.push.apply(plugins, [
66-
// Adds component stack to warning messages
67-
require.resolve('babel-plugin-transform-react-jsx-source'),
68-
// Adds __self attribute to JSX which React will use for some warnings
69-
require.resolve('babel-plugin-transform-react-jsx-self'),
70-
]);
71-
}
48+
// This is similar to how `env` works in Babel:
49+
// https://babeljs.io/docs/usage/babelrc/#env-option
50+
// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
51+
// https://github.com/babel/babel/issues/4539
52+
// https://github.com/facebookincubator/create-react-app/issues/720
53+
// It’s also nice that we can enforce `NODE_ENV` being specified.
54+
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
55+
if (env !== 'development' && env !== 'test' && env !== 'production') {
56+
throw new Error(
57+
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
58+
'`BABEL_ENV` environment variables. Valid values are "development", ' +
59+
'"test", and "production". Instead, received: ' +
60+
JSON.stringify(env) +
61+
'.'
62+
);
63+
}
7264

73-
if (env === 'test') {
74-
module.exports = {
75-
presets: [
76-
// ES features necessary for user's Node version
77-
[
78-
require('babel-preset-env').default,
79-
{
80-
targets: {
81-
node: 'current',
65+
if (env === 'development' || env === 'test') {
66+
// The following two plugins are currently necessary to make React warnings
67+
// include more valuable information. They are included here because they are
68+
// currently not enabled in babel-preset-react. See the below threads for more info:
69+
// https://github.com/babel/babel/issues/4702
70+
// https://github.com/babel/babel/pull/3540#issuecomment-228673661
71+
// https://github.com/facebookincubator/create-react-app/issues/989
72+
plugins.push.apply(plugins, [
73+
// Adds component stack to warning messages
74+
require.resolve('babel-plugin-transform-react-jsx-source'),
75+
// Adds __self attribute to JSX which React will use for some warnings
76+
require.resolve('babel-plugin-transform-react-jsx-self'),
77+
]);
78+
}
79+
80+
if (env === 'test') {
81+
module.exports = {
82+
presets: [
83+
// ES features necessary for user's Node version
84+
[
85+
require('babel-preset-env').default,
86+
{
87+
targets: {
88+
node: 'current',
89+
},
8290
},
83-
},
91+
],
92+
// JSX, Flow
93+
require.resolve('babel-preset-react'),
8494
],
85-
// JSX, Flow
86-
require.resolve('babel-preset-react'),
87-
],
88-
plugins: plugins.concat([
89-
// Compiles import() to a deferred require()
90-
require.resolve('babel-plugin-dynamic-import-node'),
91-
]),
92-
};
93-
} else {
94-
module.exports = {
95-
presets: [
96-
// Latest stable ECMAScript features
97-
[
98-
require.resolve('babel-preset-env'),
99-
{
100-
targets: {
101-
// React parses on ie 9, so we should too
102-
ie: 9,
103-
// We currently minify with uglify
104-
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
105-
uglify: true,
95+
plugins: plugins.concat([
96+
// Compiles import() to a deferred require()
97+
require.resolve('babel-plugin-dynamic-import-node'),
98+
]),
99+
};
100+
} else {
101+
module.exports = {
102+
presets: [
103+
// Latest stable ECMAScript features
104+
[
105+
require.resolve('babel-preset-env'),
106+
{
107+
targets: {
108+
// React parses on ie 9, so we should too
109+
ie: 9,
110+
// We currently minify with uglify
111+
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
112+
uglify: true,
113+
},
114+
// Disable polyfill transforms
115+
useBuiltIns: false,
116+
// Do not transform modules to CJS
117+
modules: false,
106118
},
107-
// Disable polyfill transforms
108-
useBuiltIns: false,
109-
// Do not transform modules to CJS
110-
modules: false,
111-
},
119+
],
120+
// JSX, Flow
121+
require.resolve('babel-preset-react'),
112122
],
113-
// JSX, Flow
114-
require.resolve('babel-preset-react'),
115-
],
116-
plugins: plugins.concat([
117-
// function* () { yield 42; yield 43; }
118-
[
119-
require.resolve('babel-plugin-transform-regenerator'),
120-
{
121-
// Async functions are converted to generators by babel-preset-env
122-
async: false,
123-
},
124-
],
125-
// Adds syntax support for import()
126-
require.resolve('babel-plugin-syntax-dynamic-import'),
127-
]),
128-
};
123+
plugins: plugins.concat([
124+
// function* () { yield 42; yield 43; }
125+
[
126+
require.resolve('babel-plugin-transform-regenerator'),
127+
{
128+
// Async functions are converted to generators by babel-preset-env
129+
async: false,
130+
},
131+
],
132+
// Adds syntax support for import()
133+
require.resolve('babel-plugin-syntax-dynamic-import'),
134+
]),
135+
};
129136

130-
if (env === 'production') {
131-
// Optimization: hoist JSX that never changes out of render()
132-
// Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553
133-
// TODO: Enable again when these issues are resolved.
134-
// plugins.push.apply(plugins, [
135-
// require.resolve('babel-plugin-transform-react-constant-elements')
136-
// ]);
137+
if (env === 'production') {
138+
// Optimization: hoist JSX that never changes out of render()
139+
// Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553
140+
// TODO: Enable again when these issues are resolved.
141+
// plugins.push.apply(plugins, [
142+
// require.resolve('babel-plugin-transform-react-constant-elements')
143+
// ]);
144+
}
137145
}
138146
}

‎packages/react-scripts/template/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1750,7 +1750,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c
17501750
RewriteRule ^ index.html [QSA,L]
17511751
```
17521752
1753-
It will get copied to the `build` folder when you run `npm run build`.
1753+
It will get copied to the `build` folder when you run `npm run build`.
17541754
17551755
If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
17561756
@@ -2043,6 +2043,7 @@ HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run
20432043
PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
20442044
CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
20452045
REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder.
2046+
CRA_BABEL_PRESET_FILE | :white_check_mark: | :x: | If you need to modify the babel preset file without ejecting you can set this to a project relative file path e.g. `CRA_BABEL_PRESET_FILE=.babel-preset-react-app.js`. Doing so is needed for optional dependencies like Typescript or relay (see [facebookincubator/create-react-app#2775](https://github.com/facebookincubator/create-react-app/pull/2775)).
20462047
20472048
## Troubleshooting
20482049

0 commit comments

Comments
 (0)