エンジニアスタンプラリー～フロントエンド編＃7

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

ビルドツール
開発をより効率的に、みたいなことが実現できそうなテーマ。

Build Tools

Linters and Formatters

まずはESLintを導入。
Getting Started with ESLintに従って、yarnからインストール。それだけ。

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
}

次にPrettierを導入。
公式ページPrettierのトップに３ステップでGet Startedが記載。
シンプル is ベスト。

yarn add prettier --dev --exact
yarn prettier --write src/index.js
yarn add pretty-quick husky --dev

最後に、ESLintとPrettierを連携させたり、VS Code上で実行できるようにしたり、コミット前に実行させたり。

package.json

  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }

Task Runners

今回は黄色文字のnpm scriptsを充実させる。
ルール違反だけど、実はSASSの監視設定で追加しちゃってた。
今回は公式ドキュメントがいまいちだったので、npm-scriptsを使ってみるを参考にさせていただいた。
コピーする人、並列実行する人、監視する人、いろいろ。

package.json

"scripts": {
  "start": "yarn watch-css",
  "watch-css": "sass --watch src/sass/main.scss styles/style.css",
  "deploy": "npm-run-all deploy:*",
  "deploy:html": "cpx index.html ./docs",
  "deploy:css": "cpx ./styles/*.css ./docs/styles",
  "deploy:js": "cpx ./scripts/*.js ./docs/scripts",
  "deploy:assets": "cpx ./assets/* ./docs/assets"
}

Module Bundlers

最近巷で聞くWebpack。
公式のGetting Started | webpackを参考に開発環境を整備した。
今までやってきたことが、これ一本でできる感じ。

package.json

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "watch": "webpack --watch",
  }

webpack.config.js

module.exports = {
  mode: MODE,
  entry: './src/js/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },

  devServer: {
    contentBase: 'dist',
    open: true
  },

  module: {
    rules: [
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use: [
          'style-loader', // linkタグに出力する機能
          {
            loader: 'css-loader', // CSSをバンドルするための機能
            options: {
              url: false,
              sourceMap: enabledSourceMap,
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader', // Sassファイルの読み込みとコンパイル
            options: {
              sourceMap: enabledSourceMap
            }
          }
        ]
      }
    ]
  }
};

成果物

せっかくなのでjsもcssも全部一つにまとめる、ってところまでやってみた。
https://tonchan1216.github.io/WDR-frontend/v7/
https://github.com/tonchan1216/WDR-frontend/tree/v7.0