External import maps, today! • Lea Verou
A few weeks ago, I posted Web dependencies are broken. Can we fix them?. Today’s post is a little less gloomy: Turns out that the major limitation that would allow centralized set-it-and-forget-it import map management can be lifted today, with excellent browser support! The core idea is that you can use DOM methods to inject an import map dynamically, by literally creating an <script type="import
Resilient Import Maps - Better Theme Development and Beyond (2025) - Shopify
Resilient Import Maps - Better Theme Development and BeyondImport maps are great for both performance and developer experience, but their original limitations made them hard to use, especially at Shopify’s scale. We stepped up and pushed changes across the HTML spec, Chromium and WebKit to fix these issues at the web platform level. Now, developers can interleave JavaScript modules and multiple im
JavaScriptã®ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«è§£æ±ºã®ç›¸äº’é‹ç”¨æ€§ / JSConf JP 2024 - Interoperability of Module Resolutions in JavaScript
https://jsconf.jp/2024/talk/berlysia/
ESModules プラットフォームã¨ã‚¨ã‚³ã‚·ã‚¹ãƒ†ãƒ ã®ç‹é–“㧠| poteboy
一定ã®è¦æ¨¡ä»¥ä¸Šã®Webアプリケーションã«ãŠã„ã¦ã€JavaScriptを開発時ã®ã¾ã¾ã®å½¢ã§é…ä¿¡ã™ã‚‹ã“ã¨ã¯æ»…多ã«ã‚ã‚Šã¾ã›ã‚“。webpackã‚„Rollupãªã©ã®ãƒãƒ³ãƒ‰ãƒ©ã‚’使用ã—ã¦ã€ãƒ•ã‚¡ã‚¤ãƒ«ã‚’ã¾ã¨ã‚ãŸä¸Šã§é…ä¿¡ã™ã‚‹ã“ã¨ãŒä¸€èˆ¬çš„ã§ã™ã€‚ ESModulesãŒæ™®åŠã—ãƒãƒ³ãƒ‰ãƒ«å·¥ç¨‹ãªã—ã§ã‚‚主è¦ãƒ–ラウザãŒJavaScriptã®ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã‚’直接解釈ã§ãるよã†ã«ã¯ãªã‚Šã¾ã—ãŸãŒã€æˆ‘々ã¯ä¾ç„¶ã¨ã—ã¦ãƒãƒ³ãƒ‰ãƒ©ã‚’使用ã—ã¦Webアプリケーションを開発ã—ã¦ã„ã¾ã™ã€‚一体ãªãœã§ã—ょã†ã‹ï¼Ÿ ã„ãã¤ã‹ç†ç”±ã¯ã‚ã‚Šã¾ã™ãŒã€ãã®å†…ã®1ã¤ã« importã®ã‚³ã‚¹ãƒˆãŒé«˜ã„ ã“ã¨ãŒã‚ã’られã¾ã™ã€‚ ã“ã‚Œã¯v8ãƒãƒ¼ãƒ ãŒå…¬é–‹ã—ã¦ã„るベンãƒãƒžãƒ¼ã‚¯æ¸¬å®šã‚’見ã¦ã‚‚明らã‹ã§ã™ã€‚モジュールã®èªã¿è¾¼ã¿ã«æ™‚é–“ãŒã‹ã‹ã‚‹ã¨å½“然ページã®èªã¿è¾¼ã¿é€Ÿåº¦ãŒé…ããªã‚Šã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ä½“験ãŒæ‚ªåŒ–ã—ã¾ã™ã€‚ 出典： ES Module loading importã®ã‚³ã‚¹ãƒˆã‚’削減ã™ã‚‹ãŸã‚ã«ã‚¨ã‚³ã‚·ã‚¹ãƒ†ãƒ
require(esm) in Node.js
Recently I landed experimental support for require()-ing synchronous ES modules in Node.js, a feature that has been long overdue. In the pull request, I commented with my understanding about why it did not happen sooner before this pull request in 2024. This post expands on that comment a bit more. The opinions in this post are my own and reflect my perception of the ESM development in Node.js as
Deep Dive: Node.jsã®ESMデフォルト化ã¸ã®é“
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
2023-08-16ã®JS: Next.js v13.4.16(test mode)ã€Safariã®Storage Policyã€ESMã¸ã®ç§»è¡Œ(Redux)
JSer.info #656 - Next.js v13.4.16ãŒãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¦ã„ã¾ã™ã€‚ Release v13.4.16 · vercel/next.js v13.4.16ã«ã¯ã€å®Ÿé¨“çš„ãªæ©Ÿèƒ½ã¨ã—ã¦test modeã¨ã„ã†Playwrightã¨MSWを使ã£ãŸãƒ†ã‚¹ãƒˆã™ã‚‹ä»•çµ„ã¿ãŒè¿½åŠ ã•ã‚Œã¦ã„ã¾ã™ã€‚ Next.jsã®App Directoryã§ã¯ã€MSWãŒNext.jsã®å‡¦ç†ã«å·®ã—è¾¼ã‚ã‚‹ãƒã‚¤ãƒ³ãƒˆãŒãªã‹ã£ãŸãŸã‚ã€MSWãŒå‹•ã‹ãªã„ãªã©ã®å•é¡ŒãŒã‚ã‚Šã¾ã—ãŸã€‚ã“ã®test modeã§ã¯ãれらãŒä¸€éƒ¨è§£æ±ºã•ã‚Œã¦ãã¦ã„ã¾ã™ã€‚ Support Next.js 13 (App directory) · Issue #1644 · mswjs/msw ã¾ã 検証目的ã®å®Ÿé¨“çš„ãªæ©Ÿèƒ½ã§ã‚ã‚‹ãŸã‚今後ã¯ã‚ã‹ã‚Šã¾ã›ã‚“ãŒã€æ¬¡ã®Discussionã§Next.jsを使ã£ãŸã‚¢ãƒ—リケーションã®ãƒ†ã‚¹ãƒˆã«ã¤ã„ã¦è°è«–ã•ã‚Œã¦ã„ã¾ã™ã€‚ RFC:
JavaScript Import maps, Part 1: Introduction
We recently shipped import maps in Firefox 108 and this article is the first in a series that describes what they are and the problems they can solve. In this first article, we will go through the background and basics of import maps and follow up with a second article explaining more details of import maps. Background: JavaScript Modules If you don’t know JavaScript modules, you can read the MDN
eslint-cjs-to-esm: CJSã‚’ESMã¸ã¨ãƒžã‚¤ã‚°ãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ã™ã‚‹ãƒ„ールを書ã„ãŸ
最近ã€è‰²ã€…ãªãƒ©ã‚¤ãƒ–ラリを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); /
実践 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) ã¯å®Ÿè³ªçš„ã«
Node.jsã®ãƒã‚¤ãƒ†ã‚£ãƒ–ES Modulesサãƒãƒ¼ãƒˆãŒæŠ±ãˆã‚‹å•é¡Œã‚’解決ã™ã‚‹Babelプラグインを書ã„ãŸ
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個以上ã®åå‰ã¤ãエクスãƒãƒ¼ãƒˆã‚’定
Ship ESM & CJS in one Package
[[toc]] ESM & CJS ESM - ECMAScript modules CJS - CommonJS In the past decade, due to the lack of a standard module system of JavaScript, CommonJS (a.k.a the require('xxx') and module.exports syntax) has been the way how Node.js and NPM packages work. Until 2015, when ECMAScript modules finally show up as the standard solution, the community start migrating to native ESM gradually. // CJS const cir
メンテナンス
ランã‚ング
ãŠçŸ¥ã‚‰ã›
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
GitHub - unjs/impound: Builder-agnostic plugin to allow restricting import patterns in certain parts of your code-base.
module: make CJS load from ESM loader by aduh95 · Pull Request #47999 · nodejs/node
CommonJS is not going away | Bun Blog
JSPM - JSPM CLI Relaunch - Import Map Package Management
Release v111 · esm-dev/esm.sh
Release v98 · esm-dev/esm.sh
Improve documentation on Dual Module Packages · Issue #34515 · nodejs/node
GitHub - tc39/proposal-source-phase-imports: Proposal to enable importing modules at the source phase
{{#tags}}- {{label}}
{{/tags}}