README

@vizworx/babel-preset

@vizworx/babel-preset is a combination of @babel/preset-env, @babel/preset-react, and plugins that are commonly used at VizworX.

Install

With npm:

npm install --save-dev @vizworx/babel-preset

Or yarn:

yarn add @vizworx/babel-preset --dev

Usage

.babelrc

{
  "presets": ["@vizworx/babel-preset"]
}

Preset Options

Some projects may need to customize the underlying Babel configuration. For this purpose, @vizworx/babel-preset can accept options using the appropriate preset as a key and pass them along:

"presets": [
  [
    "@vizworx/babel-preset",
    {
      "@babel/preset-env": {
        "targets": {
          "node": "current"
        }
      }
    }
  ]
]

Plugins

In addition to the plugins used by @babel/preset-env and @babel/preset-react, we have chosen to enable some additional plugins that simplify development. Many of these plugins are for TC39 proposals that are in either Stage 3 (Candidate) or Stage 4 (Finished) of the TC39 Process, which are both considered to be unlikely to change before the next ECMAScript release.

For an explanation of the TC39 stages, and why we feel comfortable using proposals that have reached Stage 3, please read the following articles by Yehuda Katz:

Plugin	TC39 Proposal	TC39 Stage	Reason
Object Rest/Spread Properties	proposal-object-rest-spread	4	Spreading and destructuring objects and arrays is a common pattern in React
Class Properties	proposal-static-class-features proposal-class-fields	3	Class instance and static properties/methods are a recommended way of writing advanced React components
Nullish Coalescing Operator	proposal-nullish-coalescing	3	Adds an operator of `??` that is similar to `\\|\\|` but only applies to `undefined` and `null`, instead of all falsey values. This can be used to default missing values, and is extremely powerful when combined with Optional Chaining Falsey with empty string: `const value = '' \\|\\| 'example'; // value is 'example'` Nullish with empty string: `const value = '' ?? 'example'; // value is ''` Nullish with null: `const value = null ?? 'example'; // value is 'example'`
Optional Chaining	proposal-optional-chaining	3	Optional Chaining builds upon the `.` operator in objects (`user.profile.id`) with a new `?.` operator that will safely handle null/undefined values. When combined with Nullish Coalescing Operators, this simplifies retrieving optional data with a default value. Old: `let name = 'Guest'; if (user && user.profile && user.profile.name) { name = user.profile.name; }` New `const name = user?.profile?.name ?? 'Guest';`
Syntax Dynamic Import	N/A	N/A	Adds support for dynamic imports and code splitting via Webpack

Current proposals can be viewed at the TC39 Proposals repository with a list of Finished Proposals

Usage no npm install needed!