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
https://jsconf.jp/2024/talk/berlysia/
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
最近、色々なライブラリを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); /
Guy Bedford, June 19th 2020 The latest version of the jspm CDN, https://jspm.dev has been launched today as the new replacement for https://dev.jspm.io. jspm.dev allows directly importing any package from npm into the browser using only native ECMAScript module import semantics like import('https://jspm.dev/pkgname'). As of today, dev.jspm.io serves 6 million requests to over 150,000 users each mo
rollup のような ESM を吐くツールのプレビューツールを作っていると、文字列として組み立てたコードを安全に評価したいことがあります。 方法 iframe を createObjectURL dynamic import で data uri として文字列を評価 得られた関数を実行 コード // これを評価したい const code = `export default () => { console.log("xxx") }`; // 追記:2020/06/24 ユニコード文字対応 const encoded = btoa(unescape(encodeURIComponent(code))); const blob = new Blob( [ `<!DOCTYPE html> <html> <head> </head> <body> <script type=module> im
今どきの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 const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir
reg is a package manager for native ES Modules. It's built to enable dependency management for Universal JavaScript (JavaScript that can run in the Browser and in Node.js w/o a compiler). This library is highly experimental and still likely to break without notice. DO NOT USE THIS IN PRODUCTION. Supporting Universal JavaScript is quite difficult as the Browser's module system has a very unique set
Warning: This blog post is outdated. It may contain incorrect information. Update 2019-11-22: ESM support in Node.js is not experimental, anymore. This post was updated to reflect that. Conditional exports are now explained. In this blog post, we look at npm packages that contain both ES modules and CommonJS modules. Required knowledge: How ES modules are supported natively on Node.js. You can rea
Two years ago I wrote about a technique—now commonly referred to as the module/nomodule pattern—that allows you to write ES2015+ JavaScript and then use bundlers and transpilers to generate two versions of your codebase, one with modern syntax (loaded via <script type="module">) and one with ES5 syntax (loaded via <script nomodule>). The technique allows you to ship significantly less code to modu
Since launching in June 2019, Pika CDN has served over 2 million packages across thousands of unique domains. Our CDN is the best on the planet for modern JS, letting you load any npm package directly in the browser via a standard ESM interface. Skypack is our new name for the Pika CDN. It's the same great CDN made faster, more stable, and with a bunch of new improvements that weren't available in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
