Babel が Flow から TypeScript に移行した
先日 Babel のメンテナーとして知られる Nicolò Ribaudo 氏が次のツイートを投稿した。 We finally finished migrating the Babel monorepo from Flow to TypeScript! It has been a very long process started by @z_bodya, and after migrating package-by-package @JLHwung just opened this PR 😄 pic.twitter.com/WKXxV8x2MY — Nicolò Ribaudo 🏳️🌈 • 💙💛 (@NicoloRibaudo) July 23, 2022 そう、JavaScript のトランスコンパイラである Babel のソースコードが Flow から TypeScrip
@babel/plugin-transform-runtime を理解する(Babel 7)
概要 Babelの主要プラグインの一つである、@babel/plugin-transform-runtime に関して、雰囲気で使わずに理解を深めるためにまとめた内容です。 概ね上記公式ドキュメントに書いてある内容を要約しただけになります。 バージョン情報 以下で動作確認済み Node v12.16.3 @babel/core v7.4.5 @babel/plugin-transform-runtime v7.4.5 @babel/runtime@ v7.9.2 core-js v3.x @babel/plugin-transform-runtime is 何 本来はBabelによって注入されるヘルパーコードを、再利用可能なヘルパーをインポートする形に変換するプラグインです。これによってグローバル汚染を避けながら、成果物のコードサイズを小さくすることができます。 ES6+のインスタンスメソ
babel/preset-env で polyfill するとビルドに失敗する問題の解決
この解決策を教えてくれた @about_hiroppyさん、ありがとうございます。 起きていた問題 少し前に Zenn にこういう質問を立てました。（こいつ質問サービスとして使ってやがる・・・） preset-env 経由で polyfill を入れると react が import されなくなる この質問は、IE 対応をするために @babel/preset-env と useBuiltin を使うと、ビルド時に react, react-dom の依存解決ができなくなってしまうものです。 IE 対応のための polyfill は babel を使うと簡単に導入できそうですが、 module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", corejs: 3, }, ], [ "@babel/pr
@babel/preset-env (Babel 7)をハンズオンでちゃんと理解する
@babel/preset-env とは @babel/preset-env は、 babel プラグインのプリセットのことです。 そもそも babel の本体(@babel/core)は、「JSコードを入力として受け取り、ASTに変換後、何らかの変換処理を行い、変換後のASTから再度JSコードを出力すること」が責務であり、 何らかの変換処理を指定しなければ、何のトランスパイルも行われません。 この 何らかの処理 に該当する実装がbabelプラグインのことで、開発者は実現したいトランスパイルに応じて適切な babel プラグインを適用する設定を記述する必要があります。 ...でも面倒ですよね？ 単純にIEを含む主要なブラウザで一通りのES6コードを動かしたいだけというのがだいたいのユースケースです。 そんな時、対応ブウラウザなどの大雑把な情報を元に、必要なプラグインを自動で選択して、最新の
Babel is used by millions, so why are we running out of money? · Babel
Since 2018, Babel has been doing a funding experiment: can full time work on Babel be sustained? We've learned the answer might be no. In November 2019, after successfully paying Henry a salary for over a year, we expanded our goal to also support three additional maintainers: Jùnliàng, Kai, and Nicolò. Part of the Babel team (Nicolò, Jùnliàng and Henry) is still being paid a salary to work on Bab
7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel
Babel 7.14.0 is out! This release enables class fields and private methods by default (they were promoted to Stage 4 during the recent April TC39 meeting!) and adds brand checks for private fields and static class blocks to @babel/preset-env's shippedProposals option. We added support for Stage 1 async do expressions (using @babel/plugin-proposal-async-do-expressions), which extends the Stage 1 do
本当に怖い、Babelの更新 - Chatwork Creator's Note
こんにちはー。突然ですが、聞いてくださいよー。 Babelのバージョンアップしたら「Chatworkのルーム切り替えが重くなった」と社内で言われてしまいました。 みんなの仕事の効率を悪くするわけにもいかないので、戻すしかありません。Babelの更新って、本当に怖いですよねー。 そんなわけで、こんにちは。フロントエンド開発部のひむら(id:eiel)です。 さて、この話自体は少し前のことなのですが、その際に原因を特定する余裕がなく、Babelの更新は後回しになっていました。 ルーム切り替え自体が歴史的経緯もあって、「とーっても」*1難易度が高くなっていて、最悪これを改善すれば更新できるだろうと期待もしてたりもしました。 ところが、うっかり再発させてしまったので、ここで気合をいれて改善することにしました。 今日はその話を記録しておきます。 要約 経緯 原因の特定 試しにIE11をターゲットから
Babel が行っている Polyfill の仕組みについて
アプローチの 1 つである Polyfill による互換実装は、もうアップデートされない IE11 の対応や言語仕様を追従し続ける各ブラウザの実装差分をサポートするとても便利なアプローチなのですが、ブラウザに代わり自ら互換実装を行うため副作用が伴うこともあります。 副作用によって不具合が発生した場合、どのように互換実装をしているのかを理解していないと解決が困難な場合もあるので、 Babel の基本的な処理を追いつつ Polyfill について説明していきます。 なお、この記事の内容は以下のバージョンを元に記述しています。そのため Babel 7.4.0 で非推奨となった @babel/polyfill には触れません。 Babel 7.7.4 core-js 3.4.7 Babel の基本的な処理の流れ まずは Babel を利用した Polyfill による互換実装を簡単に追ってみましょ
babel-preset-envとbabel-polyfillとbabel-plugin-transform-runtime
先日NodeSchoolでbabel-preset-envについて話したので、ついでにもう少しこのあたりを調べてみました。 babel-preset-envがやってくれないこと 基本的にbabel-preset-envが変換してくれるのは文法だけなので、ターゲットブラウザに存在しない新しいクラスやメソッドについては何もしてくれません。例えば Promise とか Array.of とか。 そういうものを使いたいときは2通りの方法があります。 babel-polyfill babel-plugin-transform-runtime はい、タイトルで出落ちしてますね。 その名の通り、ポリフィルです。 とりあえずこれを import しておけば、ターゲットブラウザに足りないクラスやメソッドを補完してくれます。 実は、 babel-preset-env のオプションに useBuiltIns:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why you don't need Babel - LogRocket Blog
webpack 5.0.0-beta.30 Module not found: Error: Can't resolve '../../core-js/object/define-property' · Issue #11467 · webpack/webpack
Documentation - Using Babel with TypeScript
TypeScript -- @babel/preset-typescript & ts-loader
Migrating from Babel – SWC
Next.jsのReact Hookへの最適化は一体何をしているのか - tosuke
GitHub - michaelgmcd/vscode-language-babel: VSCode syntax highlighting for today's JavaScript
Is babel still relevant for TypeScript projects ?
GitHub - Kiikurage/babel-plugin-flow-to-typescript: Babel plugin to convert Flow code into TypeScript
prateekbh/babel-esm-plugin: Add this plugin to generate mirrored esm modules for your existing bundles
`_objectSpread` is not working properly on Chrome Mobile 39 · Issue #8721 · babel/babel