npm
BrowserSync
webpack
babel

npmパッケージまとめ(BrowserSync+webpack+babel)

More than 1 year has passed since last update.

はじめに

フロントエンドの環境構築の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'
    }
]

参考

参考