@vizworx/babel-preset v1.3.0-rc1
@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-presetOr yarn:
yarn add @vizworx/babel-preset --devUsage
.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:
- https://thefeedbackloop.xyz/tc39-a-process-sketch-stages-0-and-1/
- https://thefeedbackloop.xyz/tc39-process-sketch-stage-2/
- https://thefeedbackloop.xyz/tc39-process-sketch-stage-3/
| 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-featuresproposal-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 ChainingFalsey 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