Babel 7.5: Dynamic Import, Pipeline Operator and More
source link: https://www.tuicool.com/articles/byyEruQ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The recently released Babel 7.5
can now parse and transpile F# pipelines and dynamic imports. Babel 7.5 additionally has experimental support for TypeScript namespace
s.
The pipeline operator proposal, still in stage 1, consists of five variants. The first variant, also called “minimal” variant has been supported in Babel since version 7.0.0-beta. The last variant, dubbed Smart variant has been supported since version 7.3.0. Babel 7.5 now supports the second variant, named the F# variant .
The pipeline operator is a useful syntactic sugar on a function call with a single argument. For instance, sqrt(64)
is equivalent to 64 |> sqrt
. This allows for greater readability when chaining several functions together. The five variants for the pipeline operator cover the same functionality under different syntaxes.
For instance, the following JavaScript code:
let newScore = boundScore( 0, 100, add(7, double(person.score)) );
is equivalent to the following code with the Smart pipeline syntax:
let newScore = person.score |> double |> add(7, #) |> boundScore(0, 100, #);
The same code would be expressed with the F# pipeline syntax as follows:
let newScore = person.score |> double |> n => add(7, n) |> n => boundScore(0, 100, n);
The previous examples demonstrate that, instead of having the Smart pipeline’s concept of “topic references” ( #
), the F# pipeline syntax uses arrow functions. The Babel release explains the motivation behind the F# pipeline syntax:
[The F# pipeline syntax] has the advantage of being more similar to current JavaScript, at the cost of a slightly less concise syntax.
The F# pipeline operator handles await
as if it was a function. The following JavaScript code:
let id = ( await ( await fetch(url) ).json() ).ID;
becomes with the F# pipeline syntax:
let newScore = fetch(url) |> await |> r => r.json() |> await |> obj => obj.ID;
To use the F# pipeline syntax, developers need to add @babel/plugin-proposal-pipeline-operator
to their Babel configuration:
module.exports = { plugins: [ ["@babel/proposal-pipeline-operator", { proposal: "fsharp" }] ] };
Babel 7.5 additionally unifies its support for parsing dynamic imports. In previous Babel versions, developers would need to use different babel plugins according to the bundler they use. With webpack
or rollup
, they would only include @babel/plugin-syntax-dynamic-import
and skip Babel transforms. With Node, they would use the
babel-plugin-dynamic-import-node
plugin. For SystemJS
, they would use the @babel/plugin-transform-modules-systemjs
plugin. These use cases are now unified under a single entry point: @babel/plugin-proposal-dynamic-import
.
Developers can now also enable experimental
support for
TypeScript namespaces
in the TypeScript plugin, using the allowNamespaces
option of @babel/plugin-transform-typescript
:
module.exports = { plugins: [ ["@babel/plugin-transform-typescript", { allowNamespaces: true }] ] } Namespaces can then be used as follows: ```typescript namespace Validation { const lettersRegexp = /^[A-Za-z]+$/; const numberRegexp = /^[0-9]+$/; export class LettersOnlyValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } }
The Babel 7.5 release also comes with a host of bug fixes and other improvements
, including
defaults
browserlist query in @babel/preset-env
.
Babel is available under the MIT open source license. Contributions are welcome via the Babel GitHub organization and should follow Babel’s contribution guidelines and code of conduct . Donations to support the project may also be made via Open Collective .
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK