Babel preset for foxford js apps

Forked from babel-preset-react-app v10.0.0

First, install Babel.

Then install @foxford/babel-preset-react-app.

pnpm add @foxford/babel-preset-react-app --save-dev

Then create a file named .babelrc with following contents in the root folder of your project:

{
  "presets": ["@foxford/babel-preset-react-app"]
}

This preset uses the useBuiltIns option with transform-object-rest-spread and transform-react-jsx, which assumes that Object.assign is available or polyfilled.

Usage with Flow

Make sure you have a .flowconfig file at the root directory. You can also use the flow option on .babelrc:

{
  "presets": [["@foxford/babel-preset-react-app", { "flow": true, "typescript": false }]]
}

Usage with TypeScript

Make sure you have a tsconfig.json file at the root directory. You can also use the typescript option on .babelrc:

{
  "presets": [["@foxford/babel-preset-react-app", { "flow": false, "typescript": true }]]
}

Absolute Runtime Paths

Absolute paths are enabled by default for imports. To use relative paths instead, set the absoluteRuntime option in .babelrc to false:

{
  "presets": [["@foxford/babel-preset-react-app", { "absoluteRuntime": false }]]
}

Options

type PresetOptions {
  absoluteRuntime: boolean,
  flow: boolean,
  typescript: boolean,
  debug: boolean,
  envUseBuiltIns: 'entry' | 'usage',
  targets: {}, // preset-env targets
  mjs: boolean, // esmodules targets for preset-env
  useESModules: boolean, // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
  runtime: 'classic' | 'automatic' // use new jsx transform
}

Plugins

  "@babel/plugin-proposal-class-properties"
  "@babel/plugin-proposal-decorators"
  "@babel/plugin-proposal-nullish-coalescing-operator"
  "@babel/plugin-proposal-numeric-separator"
  "@babel/plugin-proposal-optional-chaining"
  "@babel/plugin-transform-flow-strip-types"
  "@babel/plugin-transform-react-display-name"
  "@babel/plugin-proposal-export-default-from"
  "@babel/plugin-transform-runtime"