| [9af201e] | 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 path = require('path');
|
|---|
| 10 |
|
|---|
| 11 | const validateBoolOption = (name, value, defaultValue) => {
|
|---|
| 12 | if (typeof value === 'undefined') {
|
|---|
| 13 | value = defaultValue;
|
|---|
| 14 | }
|
|---|
| 15 |
|
|---|
| 16 | if (typeof value !== 'boolean') {
|
|---|
| 17 | throw new Error(`Preset react-app: '${name}' option must be a boolean.`);
|
|---|
| 18 | }
|
|---|
| 19 |
|
|---|
| 20 | return value;
|
|---|
| 21 | };
|
|---|
| 22 |
|
|---|
| 23 | module.exports = function (api, opts, env) {
|
|---|
| 24 | if (!opts) {
|
|---|
| 25 | opts = {};
|
|---|
| 26 | }
|
|---|
| 27 |
|
|---|
| 28 | var isEnvDevelopment = env === 'development';
|
|---|
| 29 | var isEnvProduction = env === 'production';
|
|---|
| 30 | var isEnvTest = env === 'test';
|
|---|
| 31 |
|
|---|
| 32 | var useESModules = validateBoolOption(
|
|---|
| 33 | 'useESModules',
|
|---|
| 34 | opts.useESModules,
|
|---|
| 35 | isEnvDevelopment || isEnvProduction
|
|---|
| 36 | );
|
|---|
| 37 | var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
|
|---|
| 38 | var isTypeScriptEnabled = validateBoolOption(
|
|---|
| 39 | 'typescript',
|
|---|
| 40 | opts.typescript,
|
|---|
| 41 | true
|
|---|
| 42 | );
|
|---|
| 43 | var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, true);
|
|---|
| 44 | var useAbsoluteRuntime = validateBoolOption(
|
|---|
| 45 | 'absoluteRuntime',
|
|---|
| 46 | opts.absoluteRuntime,
|
|---|
| 47 | true
|
|---|
| 48 | );
|
|---|
| 49 |
|
|---|
| 50 | var absoluteRuntimePath = undefined;
|
|---|
| 51 | if (useAbsoluteRuntime) {
|
|---|
| 52 | absoluteRuntimePath = path.dirname(
|
|---|
| 53 | require.resolve('@babel/runtime/package.json')
|
|---|
| 54 | );
|
|---|
| 55 | }
|
|---|
| 56 |
|
|---|
| 57 | if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
|
|---|
| 58 | throw new Error(
|
|---|
| 59 | 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
|
|---|
| 60 | '`BABEL_ENV` environment variables. Valid values are "development", ' +
|
|---|
| 61 | '"test", and "production". Instead, received: ' +
|
|---|
| 62 | JSON.stringify(env) +
|
|---|
| 63 | '.'
|
|---|
| 64 | );
|
|---|
| 65 | }
|
|---|
| 66 |
|
|---|
| 67 | return {
|
|---|
| 68 | presets: [
|
|---|
| 69 | isEnvTest && [
|
|---|
| 70 | // ES features necessary for user's Node version
|
|---|
| 71 | require('@babel/preset-env').default,
|
|---|
| 72 | {
|
|---|
| 73 | targets: {
|
|---|
| 74 | node: 'current',
|
|---|
| 75 | },
|
|---|
| 76 | },
|
|---|
| 77 | ],
|
|---|
| 78 | (isEnvProduction || isEnvDevelopment) && [
|
|---|
| 79 | // Latest stable ECMAScript features
|
|---|
| 80 | require('@babel/preset-env').default,
|
|---|
| 81 | {
|
|---|
| 82 | // Allow importing core-js in entrypoint and use browserlist to select polyfills
|
|---|
| 83 | useBuiltIns: 'entry',
|
|---|
| 84 | // Set the corejs version we are using to avoid warnings in console
|
|---|
| 85 | corejs: 3,
|
|---|
| 86 | // Exclude transforms that make all code slower
|
|---|
| 87 | exclude: ['transform-typeof-symbol'],
|
|---|
| 88 | },
|
|---|
| 89 | ],
|
|---|
| 90 | [
|
|---|
| 91 | require('@babel/preset-react').default,
|
|---|
| 92 | {
|
|---|
| 93 | // Adds component stack to warning messages
|
|---|
| 94 | // Adds __self attribute to JSX which React will use for some warnings
|
|---|
| 95 | development: isEnvDevelopment || isEnvTest,
|
|---|
| 96 | // Will use the native built-in instead of trying to polyfill
|
|---|
| 97 | // behavior for any plugins that require one.
|
|---|
| 98 | ...(opts.runtime !== 'automatic' ? { useBuiltIns: true } : {}),
|
|---|
| 99 | runtime: opts.runtime || 'classic',
|
|---|
| 100 | },
|
|---|
| 101 | ],
|
|---|
| 102 | isTypeScriptEnabled && [require('@babel/preset-typescript').default],
|
|---|
| 103 | ].filter(Boolean),
|
|---|
| 104 | plugins: [
|
|---|
| 105 | // Strip flow types before any other transform, emulating the behavior
|
|---|
| 106 | // order as-if the browser supported all of the succeeding features
|
|---|
| 107 | // https://github.com/facebook/create-react-app/pull/5182
|
|---|
| 108 | // We will conditionally enable this plugin below in overrides as it clashes with
|
|---|
| 109 | // @babel/plugin-proposal-decorators when using TypeScript.
|
|---|
| 110 | // https://github.com/facebook/create-react-app/issues/5741
|
|---|
| 111 | isFlowEnabled && [
|
|---|
| 112 | require('@babel/plugin-transform-flow-strip-types').default,
|
|---|
| 113 | false,
|
|---|
| 114 | ],
|
|---|
| 115 | // Experimental macros support. Will be documented after it's had some time
|
|---|
| 116 | // in the wild.
|
|---|
| 117 | require('babel-plugin-macros'),
|
|---|
| 118 | // Disabled as it's handled automatically by preset-env, and `selectiveLoose` isn't
|
|---|
| 119 | // yet merged into babel: https://github.com/babel/babel/pull/9486
|
|---|
| 120 | // Related: https://github.com/facebook/create-react-app/pull/8215
|
|---|
| 121 | // [
|
|---|
| 122 | // require('@babel/plugin-transform-destructuring').default,
|
|---|
| 123 | // {
|
|---|
| 124 | // // Use loose mode for performance:
|
|---|
| 125 | // // https://github.com/facebook/create-react-app/issues/5602
|
|---|
| 126 | // loose: false,
|
|---|
| 127 | // selectiveLoose: [
|
|---|
| 128 | // 'useState',
|
|---|
| 129 | // 'useEffect',
|
|---|
| 130 | // 'useContext',
|
|---|
| 131 | // 'useReducer',
|
|---|
| 132 | // 'useCallback',
|
|---|
| 133 | // 'useMemo',
|
|---|
| 134 | // 'useRef',
|
|---|
| 135 | // 'useImperativeHandle',
|
|---|
| 136 | // 'useLayoutEffect',
|
|---|
| 137 | // 'useDebugValue',
|
|---|
| 138 | // ],
|
|---|
| 139 | // },
|
|---|
| 140 | // ],
|
|---|
| 141 | // Turn on legacy decorators for TypeScript files
|
|---|
| 142 | isTypeScriptEnabled && [
|
|---|
| 143 | require('@babel/plugin-proposal-decorators').default,
|
|---|
| 144 | false,
|
|---|
| 145 | ],
|
|---|
| 146 | // class { handleClick = () => { } }
|
|---|
| 147 | // Enable loose mode to use assignment instead of defineProperty
|
|---|
| 148 | // See discussion in https://github.com/facebook/create-react-app/issues/4263
|
|---|
| 149 | // Note:
|
|---|
| 150 | // 'loose' mode configuration must be the same for
|
|---|
| 151 | // * @babel/plugin-proposal-class-properties
|
|---|
| 152 | // * @babel/plugin-proposal-private-methods
|
|---|
| 153 | // * @babel/plugin-proposal-private-property-in-object
|
|---|
| 154 | // (when they are enabled)
|
|---|
| 155 | [
|
|---|
| 156 | require('@babel/plugin-proposal-class-properties').default,
|
|---|
| 157 | {
|
|---|
| 158 | loose: true,
|
|---|
| 159 | },
|
|---|
| 160 | ],
|
|---|
| 161 | [
|
|---|
| 162 | require('@babel/plugin-proposal-private-methods').default,
|
|---|
| 163 | {
|
|---|
| 164 | loose: true,
|
|---|
| 165 | },
|
|---|
| 166 | ],
|
|---|
| 167 | [
|
|---|
| 168 | require('@babel/plugin-proposal-private-property-in-object').default,
|
|---|
| 169 | {
|
|---|
| 170 | loose: true,
|
|---|
| 171 | },
|
|---|
| 172 | ],
|
|---|
| 173 | // Adds Numeric Separators
|
|---|
| 174 | require('@babel/plugin-proposal-numeric-separator').default,
|
|---|
| 175 | // Polyfills the runtime needed for async/await, generators, and friends
|
|---|
| 176 | // https://babeljs.io/docs/en/babel-plugin-transform-runtime
|
|---|
| 177 | [
|
|---|
| 178 | require('@babel/plugin-transform-runtime').default,
|
|---|
| 179 | {
|
|---|
| 180 | corejs: false,
|
|---|
| 181 | helpers: areHelpersEnabled,
|
|---|
| 182 | // By default, babel assumes babel/runtime version 7.0.0-beta.0,
|
|---|
| 183 | // explicitly resolving to match the provided helper functions.
|
|---|
| 184 | // https://github.com/babel/babel/issues/10261
|
|---|
| 185 | version: require('@babel/runtime/package.json').version,
|
|---|
| 186 | regenerator: true,
|
|---|
| 187 | // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
|
|---|
| 188 | // We should turn this on once the lowest version of Node LTS
|
|---|
| 189 | // supports ES Modules.
|
|---|
| 190 | useESModules,
|
|---|
| 191 | // Undocumented option that lets us encapsulate our runtime, ensuring
|
|---|
| 192 | // the correct version is used
|
|---|
| 193 | // https://github.com/babel/babel/blob/090c364a90fe73d36a30707fc612ce037bdbbb24/packages/babel-plugin-transform-runtime/src/index.js#L35-L42
|
|---|
| 194 | absoluteRuntime: absoluteRuntimePath,
|
|---|
| 195 | },
|
|---|
| 196 | ],
|
|---|
| 197 | isEnvProduction && [
|
|---|
| 198 | // Remove PropTypes from production build
|
|---|
| 199 | require('babel-plugin-transform-react-remove-prop-types').default,
|
|---|
| 200 | {
|
|---|
| 201 | removeImport: true,
|
|---|
| 202 | },
|
|---|
| 203 | ],
|
|---|
| 204 | // Optional chaining and nullish coalescing are supported in @babel/preset-env,
|
|---|
| 205 | // but not yet supported in webpack due to support missing from acorn.
|
|---|
| 206 | // These can be removed once webpack has support.
|
|---|
| 207 | // See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
|
|---|
| 208 | require('@babel/plugin-proposal-optional-chaining').default,
|
|---|
| 209 | require('@babel/plugin-proposal-nullish-coalescing-operator').default,
|
|---|
| 210 | ].filter(Boolean),
|
|---|
| 211 | overrides: [
|
|---|
| 212 | isFlowEnabled && {
|
|---|
| 213 | exclude: /\.tsx?$/,
|
|---|
| 214 | plugins: [require('@babel/plugin-transform-flow-strip-types').default],
|
|---|
| 215 | },
|
|---|
| 216 | isTypeScriptEnabled && {
|
|---|
| 217 | test: /\.tsx?$/,
|
|---|
| 218 | plugins: [
|
|---|
| 219 | [
|
|---|
| 220 | require('@babel/plugin-proposal-decorators').default,
|
|---|
| 221 | { legacy: true },
|
|---|
| 222 | ],
|
|---|
| 223 | ],
|
|---|
| 224 | },
|
|---|
| 225 | ].filter(Boolean),
|
|---|
| 226 | };
|
|---|
| 227 | };
|
|---|