LPをサクッと作れるboilerplate作りました
できたもの
作った背景
静的なLPを簡単に作る開発環境が欲しい。
環境構築が面倒でペライチLPでも Nuxt.js などの整った環境でnuxt generateすることがしばしばあった。
既存アプリに組み込む形で、静的でライブラリなどが含まれないようなLP作成が必要になったので環境を作った。
利用技術
特に凝った構成ではない。2020年感もない。
なぜ EJS なのか
Pug という選択肢もあったが、素のHTMLが書けるのは学習コストや移植面で大きい。一度、Pug記法にしてしまうと抜け出すのが EJS に比べて辛い気がした。
ちなみに pug-loader などを使って同じことは実現出来るようなので、今後 Pug に移行する可能性もある。
ディレクトリ構成
src
基本的にsrcディレクトリ内のファイルを操作する。
src
├── css
│ └── index.css
├── ts
│ └── index.ts
├── main.ts
└── template
├── index.ejs
└── page.config.js
npm run buildを実行すると、srcディレクトリのファイルがビルドされ、srcディレクトリの構造のままdistディレクトリへビルド後のファイルが出力される（templateディレクトリは別）。
テンプレートへのデータの流し込み
HTML（EJS）については、配置場所をpage.config.jsで管理している。これは、includeするファイルを除外したり、出力先(from/dist)を管理するだけではなく、データを注入するために用意している。
// ./src/template/page.config
module.exports = [
{
path: {
dist: 'dist/template/index.html',
from: 'src/template/index.ejs',
},
data: {
// ejsに注入するデータを定義
// `htmlWebpackPlugin.options.data` でアクセスする
},
},
];
↓ 食わせる
// webpack.config.js
const webpackPluginsTemplate = [];
const pageConfig = require('./src/template/page.config');
pageConfig.forEach((config) => {
webpackPluginsTemplate.push(
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, config.dist),
template: path.resolve(__dirname, config.from),
minify: false,
inject: 'body',
alwaysWriteToDisk: true,
data: config.data, // ← データ
})
);
});
module.exports = {
/* 中略 */
plugins: [
...webpackPluginsTemplate, // ← 複数ページ対応
],
};
<!-- ejs -->
<%= htmlWebpackPlugin.options.data.hoge %>
余談
当初、ejs-html-loader を使って実装していたが、EJSファイルからhtmlWebpackPlugin.optionsのアクセスが出来なかったため、ejs-easy-loader に変更した。
また、ejs-easy-loaderは他のejs系loaderに比べ更新が新しいみたいだった。
npm script
npm run dev
npm run dev
wepack-dev-serverでローカルサーバを起動する。
更新検知対象は、srcディレクトリ以下のCSS、TypeScript、EJSファイル。サーバー起動中はファイル検知とホットリロードが実行される。
npm run build
npm run build
実行時にproduction buildされる。ファイルはdistディレクトリに出力される。
pre-commit
対象の拡張子がコミットされる際に prettier や stylelint の整形や Linter が走る。
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.ts": [
"eslint --fix",
"eslint"
],
"**/*.html": [
"prettier --parser html --write"
],
"**/*.ejs": [
"prettier --parser html --write"
],
"**/*.css": [
"stylelint --fix"
]
}
}
最後に
実戦投入がほぼなく、知見が溜まってないので、使用していきながら随時アップデートしていこうと思う。
Discussion