module.exports = {
presets: [
[
/**
* We don't care about the these useless options as they aren't needed.
*
* https://babeljs.io/docs/babel-preset-env#bugfixes
* https://babeljs.io/docs/babel-preset-env#spec
* https://babeljs.io/docs/babel-preset-env#loose
* https://babeljs.io/docs/babel-preset-env#modules (needs a check)
* https://babeljs.io/docs/babel-preset-env#debug
* https://babeljs.io/docs/babel-preset-env#include
* https://babeljs.io/docs/babel-preset-env#exclude
* https://babeljs.io/docs/babel-preset-env#forcealltransforms
* https://babeljs.io/docs/babel-preset-env#configpath
* https://babeljs.io/docs/babel-preset-env#ignorebrowserslistconfig
* https://babeljs.io/docs/babel-preset-env#browserslistenv
* https://babeljs.io/docs/babel-preset-env#shippedproposals
*/
'@babel/preset-env',
{
targets: 'last 2 versions, not dead, > 0.5%',
/**
* This option configures how @babel/preset-env handles polyfills. It is
* 2024 and we shouldn't be needing polyfills all over the place. We
* will leave this set to "usage", which means that anything that needs
* to be polyfilled will be polyfilled.
*
* https://babeljs.io/docs/babel-preset-env#usebuiltins
*/
useBuiltIns: 'usage',
/**
* This option configured the CoreJS version that should be used.
*
* https://babeljs.io/docs/babel-preset-env#corejs
*/
corejs: '3.38',
},
],
[
'@babel/preset-react',
{
/**
* Since the docs say that the runtime will be switched to 'automatic'
* in Babel 8, we can assume that that is the right option.
*
* https://babeljs.io/docs/babel-preset-react#runtime
*/
runtime: 'automatic',
/**
* By default, this option is false but we are unsure why. This toggles
* behavior specific to development, such as adding __source and __self.
*
* https://babeljs.io/docs/babel-preset-react#runtime
*
* We leave this enabled by default and only disable this in the
* production mode. The "env" block below should handle the environment
* specific overrides.
*/
development: true,
/**
* By default, this option is set to false. The docs say that "this option
* will be removed in Babel 8. Set useBuiltIns to true if you are
* targeting to modern browsers."
*
* https://babeljs.io/docs/babel-preset-react#usebuiltins
*
* We only care about the modern browsers so we will leave this enabled
* and therefore we will use the native built-ins instead of polyfills.
*/
useBuiltIns: true,
/**
* By default, this option is set to false. The docs say that "this option
* will be removed in Babel 8. Set useSpread to true if you are
* targeting to modern browsers."
*
* https://babeljs.io/docs/babel-preset-react#usespread
*
* We only care about the modern browsers so we will leave this enabled.
*/
useSpread: true, // Use inline spread instead of Babel's helpers
},
],
[
'@babel/preset-typescript',
{
/**
* This option forcibly enables JSX parsing for all files. It determines
* whether Babel should treat TypeScript files as containing JSX syntax.
* When isTSX is enabled, Babel will parse files with JSX syntax
* correctly, allowing you to use React or similar libraries that utilize
* JSX. See an example issue here:
*
* https://github.com/facebook/metro/issues/395
*
* Since this is disabled, we cannot use any JSX-like constructs in .ts
* files - we would need to do that in .tsx files. There may be a need
* to enable this in the future but for now, leaving this disabled will
* force a clean separatation between JSX and non-JSX files.
*
* Enabling isTSX may introduce additional parsing logic for JSX syntax,
* which could slightly impact the performance of the compilation process.
* By keeping it disabled by default, Babel minimizes the overhead for
* projects that do not require this feature.
*
* https://babeljs.io/docs/babel-preset-typescript#istsx
*/
isTSX: false,
/**
* This option replaces the function used when compiling JSX expressions.
* This is so that we know that the import is not a type import,
* and should not be removed.
*
* https://babeljs.io/docs/babel-preset-typescript#jsxpragma
*/
jsxPragma: 'React', // Default
/**
* This option defined the default prama fragment and string, defaults
* to React.Fragment.
*
* https://babeljs.io/docs/babel-preset-typescript#jsxpragmafrag
*/
jsxPragmaFrag: undefined, // Default
/**
* We are unusure what this does and so we should leave this disabled.
*
* https://babeljs.io/docs/babel-preset-typescript#allextensions
*/
allExtensions: undefined, // Default
/**
* We are unusure what this does and so we should leave this disabled.
*
* https://babeljs.io/docs/babel-preset-typescript#allownamespaces
*/
allowNamespaces: undefined, // Default
/**
* This option when "enabled, type-only class fields are only removed
* if they are prefixed with the declare modifier". Since the docs say
* that the "allowDeclareFields" will be switched to 'true'
* in Babel 8, we can assume that that is the right option.
*
* https://babeljs.io/docs/babel-preset-typescript#allowdeclarefields
*/
allowDeclareFields: true,
/**
* We are unusure what this does and so we should leave this disabled.
*
* https://babeljs.io/docs/babel-preset-typescript#disallowambiguousjsxlike
*/
disallowAmbiguousJSXLike: undefined, // Default
/**
* We are unusure what this does and so we should leave this disabled.
*
* https://babeljs.io/docs/babel-preset-typescript#ignoreextensions
*/
ignoreExtensions: undefined, // Default
/**
* This option will only remove type-only imports (introduced in
* TypeScript 3.8). We are using Typescriot 5.x and therefore this
* should be enabled.
*
* https://babeljs.io/docs/babel-preset-typescript#onlyremovetypeimports
*/
onlyRemoveTypeImports: true,
/**
* This option helps generate smaller bundle sizes by changing the way
* enums are represented in bundled code. You can read more here:
* https://ultimatecourses.com/blog/const-enums-typescript
*
* While this makes sense to enable, it may lead to unexpected bugs.
* If the need is to have smaller bundle sizes, we can accomplish that
* by reducing the dependency bloat.
*
* https://babeljs.io/docs/babel-preset-typescript#optimizeconstenums
*/
optimizeConstEnums: undefined, // Default
/**
* We are unusure what this does and so we should leave this disabled.
*
* https://babeljs.io/docs/babel-preset-typescript#rewriteimportextensions
*/
rewriteImportExtensions: undefined, // Default
},
],
],
sourceMaps: true,
env: {
production: {
presets: [
[
'@babel/preset-react',
{
development: false, // Set to false only in production
},
],
],
},
},
};
Created
October 17, 2024 04:28
-
-
Save mridang/e3b20957175b83ee2650bf817cd95c9c to your computer and use it in GitHub Desktop.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment