https://github.com/thc-tools/babel-preset-react

Babel preset, for React project
https://github.com/thc-tools/babel-preset-react

babel presets react

Last synced: about 1 month ago
JSON representation

Babel preset, for React project

• Host: GitHub
• URL: https://github.com/thc-tools/babel-preset-react
• Owner: thc-tools
• License: mit
• Created: 2018-06-16T20:20:31.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T02:58:08.000Z (5 months ago)
• Last Synced: 2024-12-09T17:52:41.687Z (about 2 months ago)
• Topics: babel, presets, react
• Language: JavaScript
• Size: 501 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 31
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# babel-preset-react

This project's goal is to make a babel preset, to be used for React project built with webpack.

That way, the react applications only needs one dependency, and one preset for all the thing concerning babel.

## How to use

Install the dependency as dev dependencies, and use the preset.

Preset have two options

-   mode : Can be "development", "production", "test"

-   hot : If hot reload should be activated

```json

{

    "presets": [

        [

            "@thc/babel-preset-react",

            {

                "mode": "development",

                "hot": true

            }

        ]

    ]

}

```

## Presets used

This preset re-uses existing presets :

-   @babel/preset-env => ES2017 compatibility, based on browerlist query

-   @babel/preset-react => JSX handling + better debugging

For production :

-   babel-preset-minify => minifying code for production use (may be replaced in the future by uglify-es instead)

## Plugins used

This preset re-uses existing plugins:

-   @babel/plugin-proposal-decorators => handling decorators, annotations

-   @babel/plugin-proposal-class-properties => handling setting class properties (static, easy syntax, ...)

-   @babel/plugin-proposal-function-bind => easy binding with :: notation (this.boundFunc = ::this.func, or that::this.func)

-   @babel/plugin-proposal-object-rest-spread => handling object spreading ({a,b,...c} syntax)

-   @babel/plugin-proposal-optional-chaining => handling optional chaining (a?.b?.c instead of a && a.b && a.b.c)

-   @babel/plugin-proposal-nullish-coalescing-operator => handling default value (a ?? "Default" instead of a ? a : "Default")

-   @babel/plugin-transform-runtime => optimizing babel transform, by reusing helpers in babel/runtime (ES6 mode)

-   @babel/plugin-syntax-dynamic-import => support for import('module') syntax

-   babel-plugin-lodash => optimizing lodash import (import {add} from 'lodash' => import add from 'lodash/fp/add')

For development :

-   react-hot-loader/babel => handling hot reload for React app (to use with some conf in webpack)

For prduction :

-   @babel/plugin-transform-react-inline-element => inlining call to React API, for smaller bundle.

-   @babel/plugin-transform-react-constant-elements => hoists static React tree, avoiding calls to React.createElement, and skipping reconciling phase for subtree

-   babel-plugin-transform-react-remove-prop-types => Remove proptype declaration from source, for a smaller bundle

## Rules :

-   Commit must follow [Conventional Commit convention](https://conventionalcommits.org/)

-   [Pre-commit package](https://www.npmjs.com/package/pre-commit) should be use to enforce linting, tests validations, ...