タグ ES Modules
人気順 10 users 50 users 100 users 500 users 1000 usersimport / exportの記法だけではない、CommonJS modulesとES modulesの違い
本記事はsyumai Advent Calendar 2024 4日目の記事です。 内容としては、主にWeb Developer Conference 2024の休憩中に@NozomuIkutaさんと行った雑談を記事化したものです。 内容に何か問題があれば、本記事のコメント欄や、Xなどでご連絡ください。 require(esm)の登場 2024年、ついにNode.jsのCommonJS modulesから、E... 続きを読む
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業で... 続きを読む
ブラウザー上でリアルタイムに書いたReactやTypeScriptのコードを実行するためのノウハウ
通常、ReactやTypeScriptを使って開発する場合は、ローカル環境で開発して、ビルドして、ブラウザーで表示するという流れになります。 ただ、昨今のブラウザーの性能はかなり高くなっており、ES Modulesをうまく使うことで、ノーバンドルでReactやTypeScriptをリアルタイムにブラウザー上で反映させることができるのでは... 続きを読む
prettier-plugin-organize-imports で import 文を自動フォーマットする
これはなに? 筆者は ES Modules の import 文を自動フォーマットするツールとして長らくprettier-plugin-organize-imports を愛用しています。一時期は ESLint でフォーマットしていましたが、試行錯誤を重ねた末にこのプラグインによるフォーマット方法に至りました。 本稿ではその導入手順をフォーマットの仕組みを軽... 続きを読む
最近のTypeScriptのES Modules対応事情
ブックマークサービスQiNeel関連の記事や身の回りのよしなしごとをそこはかとなく書きつくっています。 コロナの影響で中止となった幻のTSConf 2020で、TypeScriptとES Modulesについて登壇する予定でした。 最近のTypeScriptは、モジュール関連で新たな仕様が出てきたようなので簡単にまとめておきます。前職同僚でNode... 続きを読む
Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートの平野(@shisama_)です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules(以下 ESM)についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹... 続きを読む
Node.js v14の主な変更点 - 別にしんどくないブログ
4/21 にリリースされた Node.js v14 の主な変更点を紹介します。 この記事では Changelog の Notable Change から一部を簡単に紹介します。 github.com TL;DR V8 が 8.1 になりOptional chining や Nullish coalescing が使えるようになった fs.promises が 'fs/promises' でロード可能になった ES Modules の警告が表示... 続きを読む
JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む | Web Scratch
今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app co... 続きを読む
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド(#nameみたいなやつ)を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すと... 続きを読む
Dual Package Hazard - from scratch
この記事は Node.js Advent Calendar 2019 の 11 日目の記事です。 qiita.com 今回は全 Node.js で ES Modules を利用するユーザーが知っておくべき Dual Package Hazard について紹介します。 ESModules がフラグ無しでサポートに。 これまでは ES Modules は --experimental-modules フラグが無いと使えませんでしたが... 続きを読む
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJS 形式 (module.exports / require() ) ブラウザ環境で、webpa... 続きを読む
ES modules: A cartoon deep-dive – Mozilla Hacks – the Web developer blog
ES modules bring an official, standardized module system to JavaScript. It took a while to get here, though — nearly 10 years of standardization work. But the wait is almost over. With the release of ... 続きを読む
ES modulesのexport defaultは使わないほうがよい - Islands in the byte stream
2017 - 11 - 24 ES modulesのexport defaultは使わないほうがよい ES modulesにexport defaultってのがあるんですが、default exportのexport対象に名前が必要でないことがあり、IDEによるコード補完と相性が悪いです。 他のところはどうしてるのかなと思って調べてみみると、GoogleのTypeScript Style Guid... 続きを読む
JavaScriptでモジュールを使う時代に! ブラウザで覚えるES Modules入門 - ICS MEDIA
JavaScriptの新しい仕様には、モジュールという仕組みがあります 。現時点では一部のブラウザしか対応していませんが、 ECMAScript 2015のModules の標準仕様として策定されているため、やがて全てのブラウザで使えるようになっていくでしょう。この機能は、ES2015 Modules、ES6 Modules、ES Modules、ESMなどと呼ばれています(以下、ES Modul... 続きを読む
Node.jsのES Modulesサポートの現状確認と備え - teppeis blog
2017 - 08 - 31 Node.jsのES Modulesサポートの現状確認と備え この話を今日のNode学園で話すので、ご興味あればどうぞ。まだ空きがあるようです。 nodejs.connpass.com ECMAScript 2015で待望のES Modules(ESM)の仕様が策定されたものの実装がなかなか進まない、という話を 1年前に発表した 。 その後、 ブラウザでのES Mod... 続きを読む
.mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io
created_at: 2017-08-15 updated_at: 2017-08-15 tags: [ es module , tc39 , javascript ] Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装してい... 続きを読む
.mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io
created_at: 2017-08-15 updated_at: 2017-08-15 tags: [ es module , tc39 , javascript ] Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装してい... 続きを読む
Chrome M60 で Native ES Modules + ServiceWorker を試して未来へのマイグレーションを見積もる - Qiita
目的 Chrome M60(Canary) でフラグ付きで ES 2015 の ES Modules が動くようになったので、試す。 ServiceWorker と Babel 前提で、エッジな構成で今のバンドル環境を無理矢理シミュレートしてみて、今との比較で現実的なマイグレーションパスを探しておくことにした。 成果物 https://github.com/mizchi-sandbox/nativ... 続きを読む
これから先10年、フロントエンドに関する予言 - mizchi's blog
2016 - 11 - 04 これから先10年、フロントエンドに関する予言 これは怪文書です ここから10年はWASMがDOMの GC インテグレーションを果たしてJSを置き換えるか、JSがWASMに追いつかれる前にまともな言語として進化しきれるかの チキンレース になる ES Modules のブラウザ実装が枯れた頃に先鋭化したフロントエンドツールセット群は一旦そこで破棄され、シンプル化への揺り... 続きを読む