Edited at

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'
}
]


参考


参考