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

## はじめに

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

## 汎用的なパッケージ

### npm-run-all

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

```json: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 を試す](http://akabeko.me/blog/2015/08/npm-run-all-and-concurrently/)


### path

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

## browser-sync

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

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

```
$ browser-sync init
```

### 設定ファイルを変更

```js: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と連携

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

参考：[WebPack-Dev-ServerからBrowsersyncに乗り換えた](https://saku.io/move-from-webpack-dev-server-to-browser-sync/)

## webpack

* webpack

### ミニマムで実行

```js:webpack.config.js
var webpack = require('webpack');

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

参考：[webpack入門](http://qiita.com/ossan-engineer/items/8352bdeab9ce8c8c00ef)

### webpack-dev-server

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

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

参考：[webpack-dev-serverの基本的な使い方とポイント](http://dackdive.hateblo.jp/entry/2016/05/07/183335)

### 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をやる](http://qiita.com/_likr/items/c335dec5221024ad56bc)
[Webpackを使い倒す](http://thujikun.github.io/blog/2014/12/07/webpack/)
[webpackで画像を読み込む](http://a0sy.hatenablog.jp/entry/2015/08/03/204933)

## babel

* babel-core
* babel-loader
* babel-preset-es2017

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

```:.babelrc
{
    "presets": ["es2017"]
}
```

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

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

#### 参考

* [babel6での変更点　Gulp・Webpackの設定](http://qiita.com/kamijin_fanta/items/e8e5fc750b563152bbcf)
* [ES2017を理解してみる](http://yamada.daiji.ro/blog/?p=879)


## 参考
* [npm-scripts で使える便利モジュールたち](http://qiita.com/mysticatea/items/12bb6579b9155fd74586#cross-env)