LP를 쉽게 만들 수 있는 boilerplate를 만들었어요.

만들어진 물건

https://github.com/hiro0218/LP-Boilerplate

배경 만들기

나는 정적 LP의 개발 환경을 간단하게 만들고 싶다.
단순한 LP Nuxt라도 환경 구축은 매우 번거롭다.js 등 완벽한 환경nuxt generate에서 하는 일이 자주 발생한다.
기존 앱에 들어가는 형태로 정적이며 라이브러리 등이 포함되지 않은 LP를 만들어야 해 환경을 만들었다.

기술을 이용하다

특별히 신경 쓰지 않은 구성.2020년 느낌도 안 나요.

EJS

ESLint

PostCSS

Prettier

stylelint

TypeScript

webpack

webpack-dev-server

왜 EJS야?

Pug의 선택도 있지만 원본을 쓸 수 있는 HTML은 학습 비용과 이식에 있어 크다.일단 푸그 기법을 적용하면 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 -->
___EJS0___

잡담

처음에 ejs-html-loader를 사용하여 구현되었으나 EJS 파일에서 액세스할 수 없음htmlWebpackPlugin.options으로 변경되었습니다.
또한,ejs-easy-loader는 다른 ejs계loader에 비해 업데이트되었습니다.

npm script

npm run dev

npm run dev

wepack-dev-server에서 로컬 서버를 시작합니다.
업데이트 체크 객체는 src 디렉토리 아래의 CSS, Type Script, EJS 파일입니다.서버 시작 중 파일 검사와 열 재부팅을 실행합니다.

npm run build

npm run build

실행할 때 제품build를 실행합니다.파일이 dist 디렉토리로 출력됩니다.

pre-commit

대상의 확장자를 제출할 때prettier,styllint의 성형과 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"
    ]
  }
}

최후

실전에 거의 몰입하지 않아 지식을 쌓지 못했기 때문에 사용하면서 수시로 업데이트하고 싶다.