Skip to content

Commit 96e3af2

Browse files
gaearongaearon
committed
Add modes to our Babel preset (1.x)
1 parent dfbc71c commit 96e3af2

File tree

6 files changed

+175
-124
lines changed

6 files changed

+175
-124
lines changed

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

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
'use strict';
8+
9+
module.exports = function create(env) {
10+
if (env !== 'development' && env !== 'test' && env !== 'production') {
11+
throw new Error(
12+
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
13+
'`BABEL_ENV` environment variables. Valid values are "development", ' +
14+
'"test", and "production". Instead, received: ' +
15+
JSON.stringify(env) +
16+
'.'
17+
);
18+
}
19+
20+
const plugins = [
21+
// Necessary to include regardless of the environment because
22+
// in practice some other transforms (such as object-rest-spread)
23+
// don't work without it: https://github.com/babel/babel/issues/7215
24+
require.resolve('babel-plugin-transform-es2015-destructuring'),
25+
// class { handleClick = () => { } }
26+
require.resolve('babel-plugin-transform-class-properties'),
27+
// The following two plugins use Object.assign directly, instead of Babel's
28+
// extends helper. Note that this assumes `Object.assign` is available.
29+
// { ...todo, completed: true }
30+
[
31+
require.resolve('babel-plugin-transform-object-rest-spread'),
32+
{
33+
useBuiltIns: true,
34+
},
35+
],
36+
// Transforms JSX
37+
[
38+
require.resolve('babel-plugin-transform-react-jsx'),
39+
{
40+
useBuiltIns: true,
41+
},
42+
],
43+
// Polyfills the runtime needed for async/await and generators
44+
[
45+
require.resolve('babel-plugin-transform-runtime'),
46+
{
47+
helpers: false,
48+
polyfill: false,
49+
regenerator: true,
50+
},
51+
],
52+
];
53+
54+
if (env === 'development' || env === 'test') {
55+
// The following two plugins are currently necessary to make React warnings
56+
// include more valuable information. They are included here because they are
57+
// currently not enabled in babel-preset-react. See the below threads for more info:
58+
// https://github.com/babel/babel/issues/4702
59+
// https://github.com/babel/babel/pull/3540#issuecomment-228673661
60+
// https://github.com/facebookincubator/create-react-app/issues/989
61+
plugins.push.apply(plugins, [
62+
// Adds component stack to warning messages
63+
require.resolve('babel-plugin-transform-react-jsx-source'),
64+
// Adds __self attribute to JSX which React will use for some warnings
65+
require.resolve('babel-plugin-transform-react-jsx-self'),
66+
]);
67+
}
68+
69+
if (env === 'test') {
70+
return {
71+
presets: [
72+
// ES features necessary for user's Node version
73+
[
74+
require('babel-preset-env').default,
75+
{
76+
targets: {
77+
node: 'current',
78+
},
79+
},
80+
],
81+
// JSX, Flow
82+
require.resolve('babel-preset-react'),
83+
],
84+
plugins: plugins.concat([
85+
// Compiles import() to a deferred require()
86+
require.resolve('babel-plugin-dynamic-import-node'),
87+
]),
88+
};
89+
} else {
90+
return {
91+
presets: [
92+
// Latest stable ECMAScript features
93+
[
94+
require.resolve('babel-preset-env'),
95+
{
96+
targets: {
97+
// React parses on ie 9, so we should too
98+
ie: 9,
99+
// We currently minify with uglify
100+
// Remove after https://github.com/mishoo/UglifyJS2/issues/448
101+
uglify: true,
102+
},
103+
// Disable polyfill transforms
104+
useBuiltIns: false,
105+
// Do not transform modules to CJS
106+
modules: false,
107+
},
108+
],
109+
// JSX, Flow
110+
require.resolve('babel-preset-react'),
111+
],
112+
plugins: plugins.concat([
113+
// function* () { yield 42; yield 43; }
114+
[
115+
require.resolve('babel-plugin-transform-regenerator'),
116+
{
117+
// Async functions are converted to generators by babel-preset-env
118+
async: false,
119+
},
120+
],
121+
// Adds syntax support for import()
122+
require.resolve('babel-plugin-syntax-dynamic-import'),
123+
]),
124+
};
125+
126+
if (env === 'production') {
127+
// Optimization: hoist JSX that never changes out of render()
128+
// Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553
129+
// TODO: Enable again when these issues are resolved.
130+
// plugins.push.apply(plugins, [
131+
// require.resolve('babel-plugin-transform-react-constant-elements')
132+
// ]);
133+
}
134+
}
135+
};

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
'use strict';
8+
9+
const create = require('./create');
10+
11+
module.exports = create('development');

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

+2-123
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,7 @@
66
*/
77
'use strict';
88

9-
const plugins = [
10-
// Necessary to include regardless of the environment because
11-
// in practice some other transforms (such as object-rest-spread)
12-
// don't work without it: https://github.com/babel/babel/issues/7215
13-
require.resolve('babel-plugin-transform-es2015-destructuring'),
14-
// class { handleClick = () => { } }
15-
require.resolve('babel-plugin-transform-class-properties'),
16-
// The following two plugins use Object.assign directly, instead of Babel's
17-
// extends helper. Note that this assumes `Object.assign` is available.
18-
// { ...todo, completed: true }
19-
[
20-
require.resolve('babel-plugin-transform-object-rest-spread'),
21-
{
22-
useBuiltIns: true,
23-
},
24-
],
25-
// Transforms JSX
26-
[
27-
require.resolve('babel-plugin-transform-react-jsx'),
28-
{
29-
useBuiltIns: true,
30-
},
31-
],
32-
// Polyfills the runtime needed for async/await and generators
33-
[
34-
require.resolve('babel-plugin-transform-runtime'),
35-
{
36-
helpers: false,
37-
polyfill: false,
38-
regenerator: true,
39-
},
40-
],
41-
];
9+
const create = require('./create');
4210

4311
// This is similar to how `env` works in Babel:
4412
// https://babeljs.io/docs/usage/babelrc/#env-option
@@ -47,94 +15,5 @@ const plugins = [
4715
// https://github.com/facebookincubator/create-react-app/issues/720
4816
// It’s also nice that we can enforce `NODE_ENV` being specified.
4917
var env = process.env.BABEL_ENV || process.env.NODE_ENV;
50-
if (env !== 'development' && env !== 'test' && env !== 'production') {
51-
throw new Error(
52-
'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
53-
'`BABEL_ENV` environment variables. Valid values are "development", ' +
54-
'"test", and "production". Instead, received: ' +
55-
JSON.stringify(env) +
56-
'.'
57-
);
58-
}
5918

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

‎packages/babel-preset-react-app/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
"url": "https://github.com/facebookincubator/create-react-app/issues"
99
},
1010
"files": [
11-
"index.js"
11+
"index.js",
12+
"create.js",
13+
"dev.js",
14+
"prod.js",
15+
"test.js"
1216
],
1317
"dependencies": {
1418
"babel-plugin-dynamic-import-node": "1.1.0",

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
'use strict';
8+
9+
const create = require('./create');
10+
11+
module.exports = create('production');

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
'use strict';
8+
9+
const create = require('./create');
10+
11+
module.exports = create('test');

0 commit comments

Comments
 (0)