npmパッケージまとめ（BrowserSync+webpack+babel） #npm

はじめに

フロントエンドの環境構築のBrowserSync+webpack+babelについて勉強がてらまとめました。
他にも使ってるものあった気がするので追加していきます＋良いものあったら教えてください。

汎用的なパッケージ

npm-run-all

npm-scripts の連結実行を管理するためのパッケージ

package.json

{
  "scripts": {
    "version:node": "node -v",
    "version:npm": "npm -v",
    "ver": "npm-run-all version:*"
  }
}

CLI

$ npm run ver
> npm-run-all version:*
> node -v
v6.3.0

> npm -v
3.9.6

$ run-s xxx # 直列
$ run-p xxx # 並列

参考：npm-run-all と concurrently を試す

path

NPMレジストリに公開されたNodeJSの「パス」モジュールの正確なコピー

browser-sync

ファイル変更を監視し、自動でブラウザリロードを行ってくれるツール

テンプレートの作成（bs-config.js）

$ browser-sync init

設定ファイルを変更

bs-config.js

// ...（省略）...
    "ui": {
        // ...（省略）...
    },
    "files": "./dist/**/*",
    // ...（省略）...
    "server": {
      "baseDir": "./dist",
      "middleware": function(req, res, next){
        var timestamp = "[" + new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') + "] ";
        console.log(timestamp + req.method + " " + req.originalUrl + " - " +  req.connection.remoteAddress + " - " + req.headers['user-agent']);
        next();
      }
    },
// ...（省略）...
    "browser": ["firefox", "chrome"],
// ...（省略）...

※filesとserverを追加、browserを適宜変更

webpackと連携

package.json

{
  "scripts": {
    "server": "browser-sync start --config bs-config.js",
    "watch": "webpack -w",
    "start": "run-p server watch"
  }
}

参考：WebPack-Dev-ServerからBrowsersyncに乗り換えた

webpack

webpack

ミニマムで実行

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: './src/scripts/main.js',
  output: {
    filename: './dist/scripts/bundle.js'
  }
}

参考：webpack入門

webpack-dev-server

Scssで@importされているファイルを変更しても、正しくビルドされないのでBrowsersync推奨
ローカルサーバーも起動してくれる（中身は Node.js の Express サーバーらしい）
ファイルの変更を検知して自動ビルドした後、ブラウザも自動的にリロードしてくれる（Automatic Refresh）
ブラウザ全体のリロードではなく、編集したモジュールのみを更新する Hot Module Replacement という仕組みが使える（後述）

といった機能を備えているため、ローカルで開発する分にはこちらを使う方が便利

参考：webpack-dev-serverの基本的な使い方とポイント

loader

js以外のどんなファイルでもloaderさえ使えば読み込むことができる

pug-loader
- pugで書かれたファイルをhtmlに変換して読み込むことが可能。
css-loader（sass-loader）
- cssファイルをテキストとして読み込んで、headに埋め込むことが可能。sass-loaderやstylus-loaderの場合compileも同時に行う。angularやreact等を使ってHTMLをcomponentとして扱っている場合に有効。
file-loader
- ファイルのパスを記述する時に必要

参考

webpackのcss-loaderでCSS Modulesをやる
 Webpackを使い倒す
 webpackで画像を読み込む

babel

babel-core
babel-loader
babel-preset-es2017

設定ファイルの作成（.babelrc）

.babelrc

{
    "presets": ["es2017"]
}

webpackでbabel-loaderを使用する際の設定（.babelrcの設定引き継ぎ）

webpack.config.js

loaders: [
    {
        test: /\.(js)$/,
        exclude: /node_modules/,
        loader: 'babel'
    }
]

参考

npm-scripts で使える便利モジュールたち