"CSS Module" をめぐる混乱
"CSS Module" が指すもの ２つある 従来のコミュニティベースのもの これのこと。そしてその実装。 現状フロントエンドエンジニアが指すものはだいたいこれ。 Web 標準になりつつあるもの Import Assertions で実現しそうな Synthetic Module としての CSS Module 標準になりそうな所まで来ている。 この２つに関して話がごちゃごちゃになるんで整理する。 コミュニティベースの CSS Module https://github.com/css-modules/css-modules コレ自体は概念的なもの。 その実装 として Webpack の CSS Loader などがある。 なので、一般的に「CSS Module か Styled Component か」みたいな議論ででてくるものの場合、 Webpack の CSS Loader を入れ
ブラウザにおける ES Modules の利用とパフォーマンスについて - 30歳からのプログラミング
現代の主要なブラウザでは、ES Modules（以下、ESM）を利用することができる。 つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。 モジュールシステムをそのまま使えるので、複数のファイルをバンドルする必要もない。 この記事ではまず、ブラウザで ESM を使う方法について説明していく。 その後、処理の流れを詳しく確認していく。これを理解していないと、パフォーマンスが非常に悪いページになってしまう恐れがある。 動作確認は Google Chrome の84.0.4147.105で行っている。 ESM 利用の基本 まずは検証用にサーバを立てる。 以下のコードを Deno（バージョンは1.2.2）で実行する。 そうすると、http://localhost:8080/にアクセスしたときにindex.ht
Node.js における ES Modules を理解する - 30歳からのプログラミング
記事執筆時点での最新版の Node.js では、モジュールシステムとして ES Modules を使うことができる。 また、CommonJS で書かれたモジュールを ES Modules で読み込むこともできる。 Node.js のモジュールシステムは複雑すぎて苦手意識があったので、整理した。 この記事の内容は、Node.js のv14.7.0で動作確認している。 Node.js のモジュールシステムはバージョン毎に挙動が大きく変わるので、注意が必要。 そのファイルは CJS なのか ESM なのか Node.js で使えるモジュールシステムとして、ES Modules（以下、ESM）の他に CommonJS（以下、CJS）があり、CJS がデフォルトになっている。 Node.js におけるモジュールシステムを理解するためにはまず、Node.js が各ファイルをどのモジュールシステムとして
Overview | Tooling.Report
What is tooling.report? It's a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base. Getting StartedThis homepage shows the aggregated results from a bespoke suite of build tool tests. A build tool test is a configuration file created to specifically handle a
import文で画像やCSSを読み込むのはECMAScript仕様違反か - uhyo/blog
近頃のJavaScript開発は、モジュールとして書かれた複数のJavaScriptファイルをimport文やexport文を通じて連携させるのが基本です。また、それらのファイルはWebpackに代表されるバンドラによって事前に処理され、import文の解決・ファイルの結合といった前処理を施されるのが普通です。まったく、各ファイルが他に影響を与えないように(function(){ ... })()で囲んで文字列連結していた時代が懐かしいですね。 さて、import文の解決を担当するバンドラは、大抵JavaScriptプログラム以外のものを読み込む機能を備えています。Webpackならばloaderと呼ばれるものですね。例えば、style-loaderやcss-loaderが持つCSS Modulesの機能を使うと次のようなプログラムを書くことができます（Reactの例）。 import s
module bundler を作った
このフロントエンドの魔境に生まれたからには一度は俺が考えた最強の module bundler を作りたい。みんなそう思ってると思う。作った。 mizchi/bundler: hobby bundler tldr このコードが // foo.js export default 1; // index.js import foo from "./foo.js"; console.log(foo); export const index = 1; こうなる // @mizchi/bundler generate const _$_exported = {}; const _$_import = (id) => _$_exported[id] || _$_modules[id]((_$_exported[id] = {})); const _$_modules = { "/foo.js": (_
module bundlerの作り方(ECMAScript Modules編) - hiroppy's site
GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler You will know how to make a javascript bundler. Contribute to hiroppy/the-sample-of-module-bundler d... 変更されたコード一覧はこちら ECMAScript Modules(ESM)について さて、多くの人がすでに使っている以下のような構文が ESM と呼ばれるものです。 import { version } from "module"; export const a = 1; 仕様等のドキュメント tc39: https://tc39.es/ecma262/#sec-modules whatwg: ht
module bundlerの作り方(準備編) - hiroppy's site
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む
今どきの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
JavaScriptのモジュールは変数をエクスポートする - Qiita
今時のJavaScript開発において、JavaScriptが持つモジュールの機能は欠かすことができません。我々はプログラムをいくつものファイル（モジュール）に分割し、import文とexport文を使ってそれらを繋げています。各モジュールはexport文を用いてそのモジュール内で定義した変数・関数などをエクスポートすることができ、別のモジュールがimport文でそれらの値を取得することができるのです。 皆さんは、このimport・export文がどのように働いているのか正確に説明できるでしょうか。実は、import文やexport文というのは値をインポート・エクスポートしているのではなく、言わば変数そのものをインポート・エクスポートしているのです。これを理解するのがこの記事のゴールです。 ※ 本当は変数ではなく「バインディング」といったほうが用語としてより正確なのですが、この記事では分か
ES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA
JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesの標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ES2015 Modules、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 webpackやViteなどのフロントエンドのツールを通して、すでにES Modulesを使っているエンジニアも多いと思います。この記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesの導入で解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった JavaScript自体には他のJSファイルを取り込む標準的な仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時に、HTML
Code Splitting | webpack
tipThis guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and
Node.jsのECMAScript Modulesの紹介 - hiroppy's site
Login to Meetup | Meetup Find groups that host online or in person events and meet people in your local community who share y... ECMAScript Modules とは？ JavaScript には、AMD や UMD、CJS のような多くのモジュールシステムがあります。 ECMAScript Modules は当初 ES2015 に入る予定でした。 さて、ESM の仕様は WHATWG と TC39 が管理しますが、役割が違います。 TC39 は ESM のシンタックスや JS のルールを管理します。 例えば、モジュールは strict mode になるとか、thisの扱いとか。 しかし、モジュールの読み込みに関しては、WHATWG が管理します。 理由は、
Node.jsとECMAScript Modules - hiroppy's site
Node.js のバージョン 10 のリリースは 4/25 を予定しています。 また、ECMAScript Modules は Stability1(実験的)でリリースされます。 議論は以下で行われます。 GitHub - nodejs/modules: Node.js Modules Team Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 覚えておくべきこと ESM を使いたい場合は、拡張子を.mjsにする .jsファイルでimport/exportは使えません。 ブラウザではtype="module"となりますが、Node.js では拡張子で判断します。 .mjsの拡張子は省略可能である 拡張子の探査順は ESM の時、.mjsが優先されま
JavaScript | モジュール化(importとrequireの違い) - わくわくBank
外部ファイル(モジュール)を読み込むことを目的に「import」と「require」が利用されているのを目にする機会があります。ここでは、それぞれの「違い」と「使い方」について整理します。 require構文 CommonJSの仕様でnode.jsがサポートしている書き方です。 Node.jsで実行するなら、そのまま利用できます。 ブラウザで実行するならWebpackなどを通じて依存関係を解決する必要があります。 module構文( import ) es2015 から利用できる書き方です。 対応ブラウザがまだ少ないです。 Babelを通じてrequire構文に変換後Webpackなどを通じて依存関係を解決する必要があります。 モジュールの種類 Node.jsを利用している際、以下のモジュールの違いを意識すると良いです。 コアモジュール Node.jsが提供しいているモジュールです。 e.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
