from Vite
https://ja.vitejs.dev/guide/
with npm, nodejs
$ npm create vite@latest
これで色々質問されるので答えればできる
JavaScript RuntimeがESMをネイティブにサポートしていること
例えば、Node.jsはESMを直接解釈できる
JavaScript Module Declarations
Bundle preloading
https://github.com/WICG/bundle-preloading
JavaScriptのBundlerとminifier
Webpackより70倍速いらしい
github
Go実装
$ nix-shell -p esbuild
Work In Progress
WIPを明示するためにノートを罫線で分割する
module graphの構築に時間がかかる
server/client間でやり取りするファイルの数が多くなりすぎる
https://zenn.dev/uhyo/articles/what-is-native-esm-era#完全native-esm時代%3A-実行時パフォーマンスの問題
Hot Module Replacement
web frontendの開発時の再リロードなしのhot reloadのようなやつ
https://vitejs.dev/guide/features.html#hot-module-replacement
https://qiita.com/haradakunihiko/items/40486ec2b6b9aea119bb
本当に何もわからない
??リンクが付いてるところについて、Twitterとかでリプを送ってもらえると泣いて喜びます
Evan You
JavaSciprt向け次世代ツールチェインを作る企業
website
Announcing VoidZero - Next Generation Toolchain for JavaScript | VoidZero
Projects
「はーぷ」と読む
https://github.com/herp-inc/engineering-careers
/herp-technote
https://jobs.qiita.com/employers/herp/postings/1034
https://fumieval.hatenablog.com/entry/2022/04/07/181838
GitHub Actionでのvitestの実行時に以下のエラーが起きた
> myapp@1.0.0 test
> vitest
Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both packag
https://ja.vitejs.dev/guide/features.html#glob-のインポート
ここで見た
const ROUTES = import.meta.glob<RouteFile>('/app/routes/**/[a-z0-9[-][a-z0-9[_-]*.(ts|tsx)', {
Webpackの後継という立ち位置のRust実装のbuild tool
Webpackの作者であるTobias Koppersが作っている
Core Concepts
Rust実装
Vite & Vue Powered Static Site Generator
スライド作成ツール
開発者は@antfu
VueやViteを使ってる
https://zenn.dev/ryo_kawamata/articles/introduce-slidev
https://github.com/slidevjs/slidev
tsconfigのmoduleでmodule: node16を指定すると、tsなのに.jsでimportする必要がある
.js
拡張子は.js, .mjs, .cjs, .jsx等がある
.mjs
.cjs
.jsx
とにかく.ts, .tjs, .tjs, .tsxではないよということ
.ts
.tjs
.tsx
参考
TypeScript 4.5 以降で ESM 対応はどうなるのか?
#WIP
ESMとCJSの両方に対応したpackageを作る
関連
CJSのprojectをESMに移行する
ライブラリを作成する側の視点
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
TypeScript で"moduleResolution": "Node"は使わないほうがいい
module specifierをどう解決するかを制御する
以下2つをどのように紐づけるかという話
import等で指定されているpath (module specifier)と
import
実際のディスク上のファイル
runtimeや、bundlerのmodule resolverに合わせて設定する必要がある
Module SystemもTranspilerもBundlerも雑に見たら同じだし、
厳密に見ても跨ってるツールが多いし、
minifierも包含してたりするから、そもそもキレイに分類できない
↓は雑なノリで分類している
Module System
Bundle your TypeScript library with no config, powered by esbuild.
bundler
TypeScriptのコードを実行する
内部でESBuildを使っている
なんでこんな紛らわしい名前にしたんだ
ESBuildを使ったts-nodeみたいなやつ
ts-nodeより速い
実行
$ node -r esbuild-register ./hoge/piyo.ts
高速版Babel
https://www.infoq.com/jp/news/2019/09/sucrase-fast-babel-modern-js/
類似
SWC
開発者はFred K. Schott
以前はpika/webという名前だった
2020/4ごろにメンテ終了している
Bundlerがbundleする過程で不要なコードを取り除く
本当に利用されているコードだけを残すことで、bundle sizeを小さくする
Rollup.jsで初めて登場して、Webpackもv2から入った
その後、その周辺のbundlerには機能として含まれてるものが多い
ES2015(2015/6)より前のJSにはmoduleの仕様がなかった
ES2015で入った
ちなみにNode.jsの公開は2009年頃
そのため、それまでにいくつかのmodule systemに関する仕様が誕生した
table:仕様と実装
Vercel Inc.製
Compile a Node.js project into a single file.
Supports TypeScript, binary addons, dynamic requires.
Node.jsのmoduleのBundler
Node.jsのmoduleを単一ファイルにする