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
JavaScript エコシステムを維持する OSS の努力と課題
JSConf JP 2021 の基調講演として発表したスライドです。 https://jsconf.jp/2021/talk/javascript-maintaining-ecosystem-oss-struggles-and-challenges
Introducing Rome
We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain. Rome is a monolithic tool con
What’s coming in Babel 8 - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. TC39 (Technical Committee 39 — the institution which standardizes the JavaScript language under the “ECMAScript” specification) published ES2015 version of JavaScript popularly known as ES6. The adoption of ES6 grew among developers but browsers did not support every feature of ES2015, then c
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
さよならボイラープレート。s2sによる高速reduxアプリケーション構築 - Qiita
まだアクションクリエイターを自分で書いているの？ reduxとflowtypeを使ってフロントエンドアプリケーションを構築していると、ボイラープレートが多く、面倒だと感じることがありませんか？ しかし、もはや、このAST時代の前には過去の悩みでしかありません。 型を書く。それが全てです。 型を書いて、定数を書いて、アクションクリエイターを書いて、一つ変更したら全て変更して、もしくはなんらかのハックを行って型付けして、なんてものは過去のことです。 これからは、アクションクリエイターの作成に5秒以上時間をかけたら怠惰でありましょう。そして、これはs2sの1プラグインでしかありません。 プラグインを組み合わせると以下のようなこともできます。 s2s (Source to Source) これを実現している仕組みをSource to Source(s2s)といいます。 ソースコードからソースコード
AST本の感想、そしてASTについて
先日の技術書典3で@erukitiさんが頒布した「簡単JavaScript AST入門」(AST本)について書きます。自分は、レビューという形で関わらせて頂きました。こういった経験ははじめてで、面白かったです。なにより、ものすごいペースで加筆されていってすごいなという感じでした。 最終的によい本が出来上がりよかったです。 内容と感想さて内容ですが、一言で言うと、Babel Pluginのための本です。 よく使われるツールの紹介から、実際にBabel Pluginを作成してみるといった実践的なことまで書かれてています。 個人的に嬉しいのは、入門者向けと謳いつつも、リファレンス本として機能する点です。Babel Pluginを実際に自分で書くときに重宝するでしょう。 自分もAST本からの知見を公開してるプラグインに反映しました。 個人的に特によかったなと思うのが、5章や6章です。 これらは、え
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
create-react-appで作ったアプリのFetch as Google対応 - ninjinkun's diary
結論から言うと以下のエントリを参考に import 'babel-polyfill'; したらできた。 scrapbox.io 追記 yarn add babel-polyfill して埋め込んでいたが、その後 yarn start が遅くなったような気がしたので、CDNからの読み込みに修正した。 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js"></script> 経緯 先日作ったPWAである BlogFeedback をGoogleにインデックスして欲しかった 一応トップページのtitleとdescriptionは登録されている しかしbodyはインデックスされていない create-react-app でSPAを作っただけは普通こうなると思われる 大半のペ
ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech（テック）
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「ServiceWorker Side XXX」に登場したのは、mizchi氏。ServiceWorkerを駆使したある取り組みについて紹介します。講演資料はこちら 開発環境のためにServiceWorkerを使う mizchi氏（以下、mizchi）：では「ServiceWorker Side XXX」ということで発表させていただきます。mizchiです。よろしくお願いします。 （会場拍手） ちょっと自己紹介とかはする気ないんですけど、最近本を書いたので、その紹介だけ
ECMAScriptの使い方
プロポーザルのステージの進み方 2ヶ月に1度行われるTC39のミーティングでプロポーザルのステージを更新 ミーティングの議事録は tc39/tc39-notesで公開 毎年のECMAScriptをリリースするタイミング(6月)で、Stage 4のプロポーザルをマージ ECMAScript 20XXとしてリリース なぜ仕様策定プロセスが変わったのか ES2015以前: すべての仕様の合意が取れてからリリース ES2016以降: 合意が取れた仕様からリリース 変更理由: ECMAScriptのリリースに長い歳月がかかり言語の進化が停滞した 歴史的失敗: ES4では多くの変更を入れることを試みたが、TC39内でも意見が分かれ最終的に合意できなかった これにより言語の発展が数年間停滞した[^1] [^1]: Programming Language Standardization: Pattern
JavaScriptのライブラリを徐々にTypeScriptに移行する
Alminというライブラリは元々JavaScript(+Babel)で書かれていましたが、今年の2月にsrc/下のソースコードはTypeScriptに移行しました。 その時のコミットログは次のPRに残っているため、コミットログを1コづつ見ていけばどのように行われていったが分かると思います。 Convert src/ to TypeScript by saneyuki · Pull Request #68 · almin/almin この時取った方法は大まかに次のような手順でした src/ の TypeScript化 Babel -> JS(js -> js)だったものをTypeScript -> Babel -> JSにビルドスクリプトを変更 TypeScriptはtargetをesnextにすることで単純に型を取り除くだけの変換にする ES2015 -> ES5を実際にやるのは既存のBa
JSDocをランタイムassertに変換するBabelプラグインを書いた
JSDocをassertに変換するライブラリとそれを使ったBabelプラグインを書きました。 azu/babel-plugin-jsdoc-to-assert: Babel plugin for jsdoc-to-assert. azu/jsdoc-to-assert: JSDoc to assert ライブラリのjsdoc-to-assertの方は、JavaScript ASTのコメントからassertの文字列を作り出すだけのシンプルなものです。 実際に使う場合は、Babelのプラグインとしてbabel-plugin-jsdoc-to-assertを使い、コードを変換してランタイムassertを追加させます。 やっていることとしては、FlowTypeをランタイムチェックするbabel-plugin-typecheckのJSDoc版とも言えます。 babel-plugin-typechec
webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る - yutaponのブログ
この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること ES2015で書いたコードをWebpackでビルドする babel@6系を使う Mocha + power-assert + jsdom でテストを書く やらないこと gulpまわり React.js CSSビルドまわり 最終的なコードはこちらに上げておきました(すごく簡素な出来です)。 GitHub - sskyu/webpack-power-assert-jsdom-skeleton はじめに 今年はReact.jsがJSerの中で定着した感がありました。 Fluxの考え方を昇華させたReduxがFlux系フレームワークでデファクトになりそうな雰囲気を出しつつ、React
React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita
手元でコードを書きながら React.js を学習しようと、タイトルどおりの最小構成を作ってみました。 上記の公式ページの Starter Kit や Tutorial の構成が物足りなかったので.. GitHub に置いたので、よろしければ参考にしてください。 ⇒ https://github.com/hkusu/react-babel-browserify-gulp-sample 上記の README.md に記載している通り、特徴としては次のとおりです。 ECMAScript 6 構文のサポートおよび JSX ファイルのコンパイルに Babel を利用 依存モジュールの管理(CommonJS準拠)に Browserify を利用 タスクランナーとして gulp を利用 またサンプルコードとして、簡単なデータバインドを React.js で実装してあります。デモは こちら(GitHub
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vzhou842/faster.js: faster.js is a Babel plugin that compiles idiomatic Javascript to faster, micro-optimized Javascript.
GitHub - babel/babel: 🐠 Babel is a compiler for writing next generation JavaScript.