135 lines
4.9 KiB
JavaScript
135 lines
4.9 KiB
JavaScript
|
/* eslint-disable global-require */
|
|||
|
module.exports = function getBabelPreset() {
|
|||
|
// This is similar to how `env` works in Babel:
|
|||
|
// https://babeljs.io/docs/usage/babelrc/#env-option
|
|||
|
// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
|
|||
|
// https://github.com/babel/babel/issues/4539
|
|||
|
// https://github.com/facebook/create-react-app/issues/720
|
|||
|
// It’s also nice that we can enforce `NODE_ENV` being specified.
|
|||
|
const env = process.env.BABEL_ENV || process.env.NODE_ENV;
|
|||
|
const isEnvDevelopment = env === "development";
|
|||
|
const isEnvProduction = env === "production";
|
|||
|
const isEnvTest = env === "test";
|
|||
|
|
|||
|
if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
|
|||
|
throw new Error(
|
|||
|
"The babel preset of requires that you specify `NODE_ENV` or " +
|
|||
|
'`BABEL_ENV` environment variables. Valid values are "development", ' +
|
|||
|
`"test", and "production". Instead, received: ${JSON.stringify(env)}.`
|
|||
|
);
|
|||
|
}
|
|||
|
|
|||
|
return {
|
|||
|
presets: [
|
|||
|
isEnvTest && [
|
|||
|
// ES features necessary for user's Node version
|
|||
|
require("@babel/preset-env").default,
|
|||
|
{
|
|||
|
targets: {
|
|||
|
browsers: ["last 1 versions"],
|
|||
|
node: "8",
|
|||
|
},
|
|||
|
},
|
|||
|
],
|
|||
|
(isEnvProduction || isEnvDevelopment) && [
|
|||
|
// Latest stable ECMAScript features
|
|||
|
require("@babel/preset-env").default,
|
|||
|
{
|
|||
|
targets: {
|
|||
|
browsers: ["last 1 versions"],
|
|||
|
},
|
|||
|
corejs: 2,
|
|||
|
// `entry` transforms `@babel/polyfill` into individual requires for
|
|||
|
// the targeted browsers. This is safer than `usage` which performs
|
|||
|
// static code analysis to determine what's required.
|
|||
|
// This is probably a fine default to help trim down bundles when
|
|||
|
// end-users inevitably import '@babel/polyfill'.
|
|||
|
useBuiltIns: "entry",
|
|||
|
// Do not transform modules to CJS
|
|||
|
modules: false,
|
|||
|
include: ["transform-classes"],
|
|||
|
},
|
|||
|
],
|
|||
|
[
|
|||
|
require("@babel/preset-react").default,
|
|||
|
{
|
|||
|
// Adds component stack to warning messages
|
|||
|
// Adds __self attribute to JSX which React will use for some warnings
|
|||
|
development: isEnvDevelopment || isEnvTest,
|
|||
|
// Will use the native built-in instead of trying to polyfill
|
|||
|
// behavior for any plugins that require one.
|
|||
|
useBuiltIns: true,
|
|||
|
},
|
|||
|
],
|
|||
|
[
|
|||
|
"@emotion/babel-preset-css-prop",
|
|||
|
{
|
|||
|
sourceMap: isEnvDevelopment,
|
|||
|
autoLabel: !isEnvProduction,
|
|||
|
},
|
|||
|
],
|
|||
|
].filter(Boolean),
|
|||
|
plugins: [
|
|||
|
require("babel-plugin-styled-components").default,
|
|||
|
// Experimental macros support. Will be documented after it's had some time
|
|||
|
// in the wild.
|
|||
|
require("babel-plugin-macros").default,
|
|||
|
// https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion
|
|||
|
// export { default } from './foo'
|
|||
|
require("@babel/plugin-proposal-export-default-from").default,
|
|||
|
// export * from './foo'
|
|||
|
require("@babel/plugin-proposal-export-namespace-from").default,
|
|||
|
// Necessary to include regardless of the environment because
|
|||
|
// in practice some other transforms (such as object-rest-spread)
|
|||
|
// don't work without it: https://github.com/babel/babel/issues/7215
|
|||
|
require("@babel/plugin-transform-destructuring").default,
|
|||
|
// class { handleClick = () => { } }
|
|||
|
// Enable loose mode to use assignment instead of defineProperty
|
|||
|
// See discussion in https://github.com/facebook/create-react-app/issues/4263
|
|||
|
[
|
|||
|
require("@babel/plugin-proposal-class-properties").default,
|
|||
|
{
|
|||
|
loose: true,
|
|||
|
},
|
|||
|
],
|
|||
|
// The following two plugins use Object.assign directly, instead of Babel's
|
|||
|
// extends helper. Note that this assumes `Object.assign` is available.
|
|||
|
// { ...todo, completed: true }
|
|||
|
[
|
|||
|
require("@babel/plugin-proposal-object-rest-spread").default,
|
|||
|
{
|
|||
|
useBuiltIns: true,
|
|||
|
},
|
|||
|
],
|
|||
|
// Polyfills the runtime needed for async/await and generators
|
|||
|
[
|
|||
|
require("@babel/plugin-transform-runtime").default,
|
|||
|
{
|
|||
|
helpers: false,
|
|||
|
regenerator: true,
|
|||
|
},
|
|||
|
],
|
|||
|
isEnvProduction && [
|
|||
|
// Remove PropTypes from production build
|
|||
|
require("babel-plugin-transform-react-remove-prop-types").default,
|
|||
|
{
|
|||
|
mode: "wrap",
|
|||
|
},
|
|||
|
],
|
|||
|
// function* () { yield 42; yield 43; }
|
|||
|
!isEnvTest && [
|
|||
|
require("@babel/plugin-transform-regenerator").default,
|
|||
|
{
|
|||
|
// Async functions are converted to generators by @babel/preset-env
|
|||
|
async: false,
|
|||
|
},
|
|||
|
],
|
|||
|
// Adds syntax support for import()
|
|||
|
require("@babel/plugin-syntax-dynamic-import").default,
|
|||
|
isEnvTest &&
|
|||
|
// Transform dynamic import to require
|
|||
|
require("babel-plugin-transform-dynamic-import").default,
|
|||
|
].filter(Boolean),
|
|||
|
};
|
|||
|
};
|