Skip to content

Latest commit

 

History

History
180 lines (134 loc) · 6.53 KB

README.md

File metadata and controls

180 lines (134 loc) · 6.53 KB

ディーゼロ フロントエンド標準開発環境ビルドツール

フロントエンド標準開発環境（@d-zero/scaffold）のビルド処理をパッケージしたものです。 Scaffoldに含めているpackage.jsonのdevDependenciesに記載してあるため、追加のインストールは基本的に不要です。

他の環境へのインストール

他の環境にインストールする場合は次のように追加します。

yarn add @d-zero/builder

使用方法

以下のコマンドを実行することでビルド処理が実行されます。

npx @d-zero/builder

利用技術

  • Eleventy: HTMLトランスパイルおよび全体のビルド処理
  • esbuild: JavaScriptトランスパイル
  • Vite: CSSトランスパイル

設定

ベースがEleventyとなるので、Eleventyの設定ファイルを利用することができます。Scaffoldではeleventy.config.mjsを用意しています。

import path from 'node:path';

import eleventy from '@d-zero/builder/11ty';

export default function (eleventyConfig) {
	return eleventy(eleventyConfig, {
		alias: {
			'@': path.resolve(import.meta.dirname, '__assets', '_libs'),
		},
		outputCssDir: 'css',
		outputJsDir: 'js',
		outputImgDir: 'img',
		imageSizes: { selector: '*' },
		prettier: false,
		minifier: { minifyJS: false },
		lineBreak: '\r\n',
		charset: 'shift_jis',
		characterEntities: true,
		pathFormat: 'directory',
		autoDecode: true,
		ssi: { '**/*': { encoding: 'shift_jis' } },
	});
}

基本的なビルド設定は@d-zero/builder/11tyに規定されているため、それに追加の設定を行うことでビルド処理をカスタマイズすることができます。

フローチャート

flowchart LR
	#inHTML["*.html"]
	#inPug["*.pug"]
	#inSCSS["*.scss"]
	#inJS["*.{js,cjs,mjs}"]
	#inTS["*.ts"]
	#outHTML["*.html"]
	#outCSS["*.css"]
	#outJS["*.js"]

	#inHTML --> #dzBuilder
	#inPug --> #dzBuilder
	#inSCSS --> #dzBuilder
	#inJS --> #dzBuilder
	#inTS --> #dzBuilder
	#dzBuilder --> #outHTML
	#dzBuilder --> #outCSS
	#dzBuilder --> #outJS

	subgraph #dzBuilder["@d-zero/builder"]
		direction LR

		subgraph #eleventy["11ty"]
			#html["*.html"]
			#pug["*.pug"]
			#scss["*.scss"]
			#js["*.{js,cjs,mjs}"]
			#ts["*.ts"]

			subgraph #transformHTML["addTransform"]
				direction TB

                #characterEntities(["文字参照変換<br>(characterEntities)"])
				#prettier(["整形<br>(prettier)"])
				#minifier(["最適化<br>(minifier)"])
				#lineBreak(["改行コード変換<br>(lineBreak)"])
				#charset(["文字コード変換<br>(charset)"])

				subgraph #domSerialize["domSerialize"]
					direction TB

					#jsdom(["JSDOM.serialize()"])
					#imageSizes(["画像<br>width/height<br>属性自動付与<br>(imageSizes)"])

					#jsdom --> #imageSizes
				end

				#domSerialize --> #characterEntities --> #prettier --> #minifier --> #lineBreak --> #charset
			end

			subgraph #transpileCSS["addExtension"]
				direction TB

				#vite(["トランスパイル<br>(SASS on Vite)"])
			end

			subgraph #transpileJS["addExtension"]
				direction TB

				#esbuild(["トランスパイル<br>(esbuild)"])
			end

			#html --> #transformHTML
			#pug --> #eleventy-plugin-pug(["Pugプラグイン<br>(eleventy-plugin-pug)"]) --> #transformHTML
			#scss --> #transpileCSS
			#js --> #transpileJS
			#ts --> #transpileJS
		end

		subgraph #pathFormat["出力ファイルのパス変更<br>(pathFormat)"]
		end

		#eleventy --> #pathFormat
	end
Loading

カスタマイズ設定

addGlobalDataメソッドを利用することで、ビルド処理に必要な設定を上書きします。

オプションID 説明
alias パスのエイリアスを設定します。
outputCssDir CSSの出力ディレクトリを設定します。
outputJsDir JSの出力ディレクトリを設定します。
outputImgDir 画像の出力ディレクトリを設定します。
imageSizes 画像のwidth/height属性を自動付与します。
prettier Prettierを有効にします。
minifier Minifierを有効にします。
lineBreak 改行コードを設定します。
charset 文字コードを設定します。
characterEntities 文字参照を変換します。
pathFormat パスのフォーマットを設定します。
autoDecode 開発用ローカルサーバーの自動デコードを有効にします。
ssi 開発用ローカルサーバーのSSIの設定を行います。

詳細はコーディングガイドラインを確認してください。

その他、eleventyConfigインスタンスのプロパティやメソッドを用いてEleventyの設定を追加することで、ビルド処理をカスタマイズすることができます。

ViteやRollupに関する設定、その他ディレクトリ構成の変更などは@d-zero/builder/11tyで行うのは現状難しいため、Eleventyの設定ファイルで一から設定することになります。または、Issueもしくはプルリクエスト変更可能なオプションをリクエストしてください。

ロードマップ

静的サイトもしくはCMSのテンプレートを素早く構築するため、利用技術についてこだわりがあるわけではありません。そのため、利用技術の変更や追加を行うことがあります。現状、Eleventy/esbuild/Viteを利用している理由はちょうどよかっただけです。

技術採用のポイント

  • HTML/CSS/JSの切り離しが容易であること
  • HTMLに余計な要素・属性・コードが挿入されないこと
  • ビルド処理が高速であること

予定

  • Eleventy以外の選択肢の検討