ikmnjrd.github.io

esbuildを触った際の雑記

Posted on 2022-03-15
目次

Viteを使った方が楽だけど、できるだけシンプルな環境を作りたい気持ちでesbuildを触っています。

configファイルを作成する場合

watchオプションを有効にした時、ビルド情報を出力するためlogLevelをinfoにすると良い。

// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  logLevel: 'info',
})

// package.json
{
  ...
  "scripts": {
    "build": "node esbuild.config.js",
  }
  ...
}

CSS Module + TypeScriptで利用したい場合

esbuild-css-modules-pluginをインストールしPluginとして読み込む(GitHubリポジトリ)

declareファイルをsrc/以下に置いておく。

// index.d.ts
declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}

周辺用語

  • CSS modules
  • PostCSS

参考文献