LPをサクッと作れるboilerplate作りました

3 min読了の目安(約3000字TECH技術記事

できたもの

https://github.com/hiro0218/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"
    ]
  }
}

最後に

実戦投入がほぼなく、知見が溜まってないので、使用していきながら随時アップデートしていこうと思う。