Posted at

とりあえずシンプルな環境でflowtypeを使ってみる - Webpackを使って自動ビルド&型チェック

More than 1 year has passed since last update.

最近Flowを調べているのですが、ひとまずシンプルにFlow自動ビルド環境を作りたいと思ったので、Webpackでのビルド方法を探しました。

WebpackでFlowのプラグインには「flow-status-webpack-plugin」が見つかりました。バージョン的にはまだ出来たてなのかなーと思ったものの、ひとまず触ってみたぶんには動いたようです。

公式のBabelでのインストール手順でインストールしているのを前提にしています。

1. Webpackとプラグインをインストールする

yarn add webpack --dev

yarn add flow-status-webpack-plugin --dev
yarn add babel-loader --dev



  • Webpack
    JavaScriptのバンドルツールです。

※ Webpackの詳しい使い方に関しては、記事「最新版で学ぶwebpack 3入門 – JavaScript開発で人気のバンドルツール」を参照ください。


  • babel-loader

    babelを実行するローダーです。


  • flow-status-webpack-plugin

    Webpackでのビルド後にFlowのステータスをチェックするものです。エラー時と成功時にそれぞれテキストメッセージを取得できます。


2. webpack.config.jsを用意する。

var FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');

const webpack = require('webpack');

module.exports = {
entry: './src/main.js',
module: {
loaders: [
{
// 対象となるファイルの拡張子
test: /\.js/,
loader: "babel-loader",
exclude: /node_modules/
}
]
},
output: {
path: `${__dirname}/`, // 出力ファイルのディレクトリ名
filename: 'bundle.js' // 出力ファイル名
},
plugins: [
new FlowStatusWebpackPlugin({
onSuccess: function (stdout) {
// 成功したときのログ出力
console.log(stdout);
},
onError: function (stdout) {
// 失敗したときのログ出力
console.error(stdout);
}
})
]
};

3. package.jsonにWebpackの実行コマンドwebpack -wを追加する

{

"name": "my-project",
"main": "lib/index.js",
"scripts": {
"start" : "webpack -w",
"build": "babel src/ -d lib/",
"prepublish": "yarn run build"
}
}

3. ファイルを監視してWebpackを実行するコマンドを実行する

npm run start

※ コマンドの終了は[Ctrl]+[C]を入力します。