筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS（Ruby-to-JavaScript）、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptへトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6
TechFeed Experts Night#11 「ついに来る！TypeScript5.0の新機能」
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue
本記事で記述した Node.js ESM 対応は2022 年 5 月に TypeScript 4.7 で正式版としてリリースされました。 本記事の内容との差分はmodule:node12がmodule:node16に変更されたことぐらいです。node16では top-level await が使え、現時点ではnodenextとの差分はありません。 他に関連する機能としてresolution-modeや--moduleDetectionが追加されましたが、一般利用者が意識することはないでしょう。 先日リリースされた TypeScript 4.5 Beta で、待望の Node.js ESM 対応がアナウンスされました。 その後、ユーザーからのフィードバックを経て、TypeScript チームは TS 4.5（11/16 リリース予定）では ESM 対応を stable リリースせず、Nigh
Today we’re excited to announce the release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified con
TypeScriptのmoduleオプションの話、あるいはTypeScript開発者の苦悩、あるいはCJSとESMの話
皆さんこんにちは。早速ですが、TypeScriptのmoduleオプションはご存じでしょうか。moduleオプションは、例えば次のような値をサポートしています。 commonjs umd es2015 esnext node16 nodenext 皆さんは、moduleオプションが何を設定するオプションなのか一言で説明できますか？ 実は、TypeScriptの熟練者であってもmoduleオプションを一言で説明することは難しいはずです。なぜなら、そもそもこのmoduleオプションが複数の異なる意味で使われており、もはや一言で説明できるようなものではなくなってしまったからです。 この記事では、TypeScriptのメンテナーが書いた次のGitHub issueをベースに、moduleオプションを取り巻く状況を説明します。 moduleオプションの意味とは 昔はmoduleオプションの意味は明確
最近めっきりDenoに触ってない。一言で言うと飽きてしまった。 とはいえどうなってるかくらいの情報は追っているのだが、どうも使いたいと言う気分にならない。 今自分はDenoコントリビューターではないのでいち開発者としての外から見たDenoの現状を語ってみる 最近のDenoはWeb標準に追従している 具体的には、fetch APIの実装に始まり、ブラウザに実装されているAPIの実装を頑張っている windowオブジェクトもあるし、webcryptoやWebGPUのような、ブラウザでも誰も使ったことのないようなAPIまで実装している 自分はどうもこの流れに乗れなかった この方針は現在のDenoコアチームの強い姿勢であり、最近JavaScriptの標準化団体であるTC39に参加したという だがDenoがサーバーサイドの言語である以上、ブラウザに存在する様々なブラウザ的問題を解決するための仕組みや
TypeScript 4.7 がリリースされたので、Node.js ESM 対応の現状をまとめておく。 @teppeis さんの TypeScript 4.5 以降で ESM 対応はどうなるのか？ を先に読んでおくと、以降の話も読み進めやすいかも。 このエントリの中でも、teppeis さんの定義した用語をそのまま用いさせてもらう。 * CommonJS (CJS): 従来式の Node.js CommonJS で書かれたファイルまたはパッケージ * ES Modules (ESM): ES2015 で定義されたモジュール仕様。Node.js では v12 以降でネイティブにサポートされている。 * Native ESM: ESM 形式で記述されたファイルを、Node.js またはブラウザで直接 ESM として実行する方式またはそのファイル。擬似 ESM と区別するために Native と
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
Agile Studio プロデューサーの木下です。アジャイル開発をはじめるには、基本的な語彙やプラクティスをチームにいる全員が知ることが大切です。また、アジャイル開発を実践していく上ではスクラムのみ...
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜 2021/02/25(木) Node学園 35時限目の発表資料 https://nodejs.connpass.com/event/203464/ Node.js の ES Modules 対応について
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
Bun.Terminal API, compile-time feature flags, improved Bun.stringWidth accuracy, V8 C++ value type checking APIs, Content-Disposition support fo... URLPattern API, Fake Timers for bun:test, Custom Proxy Headers in fetch(),console.log %j format, http.Agent connection pooling fix, Standalone e...
Node.jsのNative ESM対応は夢の機能ですが、夢を詰め込みすぎたせいかCJSからの移行を難しくしているポイントが依然として存在します。そのひとつが拡張子問題で、Node.jsのNative ESMではモジュールの拡張子を明示しなければいけなくなりました。 (これはWebブラウザの挙動に近づけるための判断だと考えられます。) 特にTypeScriptと他のツール (JestやWebpack) と組み合わせて利用している状態でのNative ESM化は実質的に未解決の状態だと言えます。本稿ではこの現状についてできる範囲で状況説明を試みます。 Node.jsの拡張子の扱い Node.jsはCJSとESMの2つのモジュールフォーマットをサポートしていますが、これらは単にパーサーが異なるだけではなく、実質的には「2種類の異なるモジュールシステムがFFIで繋がっている」程度には隔たりがあり
treeshake, DCE, terser mangling
現在 TC39 の 3 月のミーティングのアジェンダが GitHub にて公開されている(Link)。 それによると、Module Frangments という新しいプロポーザルが@littledan氏によって提案される予定だ。 この記事では、現在の Module Frangments の概要とモチベーション、構文について解説する。もしさらなる詳細に興味がある場合は https://github.com/littledan/proposal-module-fragments を読んでほしい。 また、Module Fragments は現在 Stage 0 の提案であり、今後仕様が大きく変わっていくことが予想されるのでその点には注意してほしい。 概要 Module Fragments はインラインで JavaScript のモジュールを定義するための構文を導入する提案である。詳細は後述するが
Node.js 21では --experimental-default-type=module フラグで、JavaScriptファイルのデフォルトの解釈をCJS(CommonJS)からESM(ECMAScript Modules)に変更できるようになっています。 Node.js 21 is now available! | Node.js これは、Node.jsにおいてJavaScriptファイル(.js)のデフォルトをESMに変更するための第一歩です。 今回のDeep Diveでは、Node.jsのESMデフォルト化に向けたIssueや実装について紹介します。 Node.jsのESMデフォルト化 Discussion: New “ESM by default” mode · Issue #49432 · nodejs/node このIssueは、Node.jsにおけるambiguous
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。フロントエンド開発センター(UIT) Front-end Dev.9チームの鴻巣(@kazushikonosu)です。LINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 LINEスキマニのフロントエンドチームでは、React/TypeScript製のWebアプリを開発しています。主にクライアントサイド向けのコードを扱っていますが、SSRのため同じリポジトリ内でNode.jsを使って実行されるTypeScriptコードも扱っています。クライアントサイドのモジュールバンドラとして長らくwebpackが使われていましたが、webpackを使い続けることでチームの
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
One of the most impactful things we’ve worked on in TypeScript 5.0 isn’t a feature, a bug fix, or a data structure optimization. Instead, it’s an infrastructure change. In TypeScript 5.0, we restructured our entire codebase to use ECMAScript modules, and switched to a newer emit target. What to Know Now, before we dive in, we want to set expectations. It’s good to know what this does and doesn’t m
2022 年現在、Node.js 界隈は ESM (ES Module) への移行の過渡期であり、特に既存プロジェクトにおいては CJS (CommonJS) 構成であることがまだまだ多い。また、Pure ESM な npm パッケージは、CSJ プロジェクトからの利便性が悪く、dynamic import が必須で非同期化を強いられたり TypeScript の設定変更が必要だったりと面倒が増える。 そんな状況のため、広く使われたい npm パッケージを公開する場合、importでもrequireでも利用できるよう dual package 構成を取りたくなるが、定番手法が確立しているとは言えず、意外と面倒が多い。よく見るのは、tscやesbuild等で ESM 用と CJS 用の設定ファイルを用意してそれぞれ別ディレクトリに出力し、パッケージに両方同梱して conditional ex
Today we’re excited to announce the availability of TypeScript 4.7! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript and adds syntax for types. Types help describe what kinds of values you’re working with and what kinds of functions you’re calling. TypeScript can use this information to help you avoid about mistakes like typos, missing arguments, or forgetting
ECMAScript Module Harmony
【2025/05/11】 2024/12 の Module Harmony のスライドについて追記し、画像を更新 遅延再エクスポート、同期インポートの提案についての記述を追加 【2024/08/20】 WasmCG で進行している ES Module Integration についての記述を追加 インポート属性の assert キーワードが正式に仕様から取り除かれたのに追随 【2024/05/26】 せっかくなので好きなTC39 Proposals発表ドラゴンをファーストビューに追加 モジュールインスタンスフェーズがなくなり、ソースフェーズと同じレイヤーへと変更されたのに追随 インポート属性で assert キーワードの廃止が検討されていることを追記 同期モジュールアサートがディレクティブを使うよう変更されたのに追随 Compartments のインターフェースが変更されたのに追随し、独立
In this blog post, I’ll explain everything you need to know in order to use and produce native ECMAScript modules on Node.js. The GitHub repository iterable is an example of a TypeScript ESM package that works on Node.js. It still uses the "typesVersions" workaround (which isn’t needed in TypeScript 4.7 and later). (Thanks to Guy Beford and Oleg Drapeza for their feedback on this post.) TypeScript
Today we are excited to announce the beta release of TypeScript 4.7! To get started using the beta, you can use npm with the following command: npm install typescript@beta You can also get editor support by Downloading for Visual Studio 2022/2019 Following directions for Visual Studio Code and Sublime Text 3. Here’s a quick list of what’s new in TypeScript 4.7! ECMAScript Module Support in Node.js
esm-package.md Pure ESM package The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS. This means you have the following choices: Use ESM yourself. (preferred) Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide. If the package is used in
Storybook 6.2
Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world. As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upg
こんにちは！maimuです。 私が参加しているプロジェクトでは、複数のRailsアプリケーションが稼働しています。デプロイの方法として Docker Compose で対応をしていましたが、夜間にデプロイ作業をする必要があり、毎回タイミングの調整作業が発生していたため、ゼロダウンタイムでデプロイが可能なKamalに移行することになりました。 Kamal でデプロイを実行する場合、Rails アプリケーションのデータベースに SQLite を利用していたり、その他のミドルウェアを必要としない場合は設定ファイルは初期設定を少し編集するのみで対応ができます。 しかし、実際にサービスとして利用されているアプリケーションの多くは構成がもっと複雑であり、Kamal の設定においても状況に応じて考慮すべき点が変わっていきます。 今回のデプロイ方法の移行を通じて学んだ Kamal の設定部分に焦点を当てて
[[toc]] Three years ago, I wrote a post about shipping ESM & CJS in a single package, advocating for dual CJS/ESM formats to ease user migration and trying to make the best of both worlds. Back then, I didn't fully agree with aggressively shipping ESM-only, as I considered the ecosystem wasn't ready, especially since the push was mostly from low-level libraries. Over time, as tools and the ecosyst
Today we’re excited to announce our beta release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript, smaller, simpler, and faster. We’ve implemented the new decorators standard, functionality to better support ESM projects in Node and bundlers, new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified configuratio
Hello, Modules!
It has already been available for some time in modern browsers, but we can now finally use it in Node.js, thanks to Node.js 10 becoming obsolete. As I wrote about earlier this year, I have personally been waiting for this day for 10 years. Here’s a good overview of JavaScript Modules. What are the benefits of JavaScript Modules over CommonJS?Unified syntax. Helps with teaching.Browser compatibilit
Today we are excited to announce the beta release of TypeScript 4.5! To get started using the beta, you can get it through NuGet, or use npm with the following command: You can also get editor support by Downloading for Visual Studio 2019/2017 Following directions for Visual Studio Code and Sublime Text 3. Some major highlights of TypeScript 4.5 are: ECMAScript Module Support in Node.js Supporting
babel-plugin-node-cjs-interop というパッケージを作ったのでその紹介です。 (GitHub) 何が問題か Node.jsのネイティブES ModulesサポートとBabelやTypeScriptのES Modulesサポートを併用したときに問題が起きます。 ESMとCJS JavaScriptには標準のモジュールシステム (ES Modules, ESM) がありますが、ESMの策定前に先だっていくつかのコミュニティー定義のモジュールシステムが存在していました。そのうちNode.jsを中心として使われていたのがCommonJS Modules (CJS) です。そのNode.js界隈でもESMへの移行が進んでいます。 移行にあたって問題になることのひとつが、ESMとCJSのエクスポートモデルの違いです。 ESMでは、モジュールは0個以上の名前つきエクスポートを定
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバンドルサイズがわからない、という問題がありました。 なので、それに対応したものを自分で作りました。netlify にデプロイしてあります。 こんな感じです。 使い方 https://shakerphobia.netlify.app/?pkg=<>&imports=<a,b,c> どうやって動いてるか URL を踏むと、 cdn.skypack.dev (その実体は npm) からソースコードを落としてきて、 Web
本記事はsyumai Advent Calendar 2024 4日目の記事です。 内容としては、主にWeb Developer Conference 2024の休憩中に@NozomuIkutaさんと行った雑談を記事化したものです。 内容に何か問題があれば、本記事のコメント欄や、Xなどでご連絡ください。 require(esm)の登場 2024年、ついにNode.jsのCommonJS modulesから、ES modulesを利用できるようになりました。 使い方は簡単で、これまでCommonJS modulesから別のCommonJS modulesを利用するために使っていた require をそのままES modulesに対して使います。 // ES modules側 (counter.mjs) let count = 0; export const currentCount = ()
Today we’re excited to announce our Release Candidate (RC) of TypeScript 4.5! Between now and the stable release of TypeScript 4.5, we expect no further changes apart from critical bug fixes. To get started using the RC, you can get it through NuGet, or use npm with the following command: You can also get editor support by Downloading for Visual Studio 2019/2017 Trying Visual Studio Code Insiders
Node.js の import specifier と ECMAScript の ImportSpecifier 先日 Firefox の JavaScript エンジンである SpiderMonkey の公式ブログに Import Maps についての記事が投稿された。 https://spidermonkey.dev/blog/2023/02/23/javascript-import-maps-part-1-introduction.html この記事は、そもそも ECMAScript Modules とは何かというところから入り、Node.js のモジュールシステムの歴史やブラウザの ECMAScript Modules との関係などを説明した後、本題である Import Maps について解説している。短い時間で読める面白い記事なので、まだ読んでいない人はぜひ読んでほしい。 この
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
ついに来る！TypeScript5.0の新機能
Node.js + TypeScriptのモジュールを整理してみる
Native ESM 時代のフロントエンドビルドツールの動向
TypeScript 4.5 以降で ESM 対応はどうなるのか？
Announcing TypeScript 5.0 - TypeScript
Denoよどこへ行く - keroxpのScrapbox
TypeScript 4.7 と Native Node.js ESM
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
アジャイルプラクティスマップを公開しました | ブログ | Agile Studio
CommonJS is not going away | Bun Blog
Native ESM + TypeScript 拡張子問題: 歯にものが挟まったようなスッキリしない書き流し
バンドル最適化マニアクス at tfconf
JavaScript の Module Fragments について
Deep Dive: Node.jsのESMデフォルト化への道
アプリケーションコードに変更を加えないNode.js Native ESMへの移行
TypeScriptのJSDocサポートでできること、できないこと
TypeScript's Migration to Modules - TypeScript
https://blog.idobata.io/post/closing
Vite 3 が採用した CJS Proxy による Dual Package 構成
Announcing TypeScript 4.7 - TypeScript
TypeScript and native ESM on Node.js
Announcing TypeScript 4.7 Beta - TypeScript
Pure ESM package
プロジェクトのデプロイ方法をKamalに移行しました - ESM アジャイル事業部 開発者ブログ
Move on to ESM-only
Announcing TypeScript 5.0 Beta - TypeScript
Announcing TypeScript 4.5 Beta - TypeScript
Node.jsのネイティブES Modulesサポートが抱える問題を解決するBabelプラグインを書いた
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った
import / exportの記法だけではない、CommonJS modulesとES modulesの違い
Announcing TypeScript 4.5 RC - TypeScript
Node.js と ECMAScript の Import Specifier は意味が違うらしい
dokugaeru.hatenablog.com
note.com/alzhacker
newsdig.tbs.co.jp
share.google
mika262.com
kurashinista.jp