2016-05-26 7 views
0

私はWebPACKの-devのサーバーを持っている、と私はNPM(package.jso)から実行しますN:Webpack-dev-serverはテストとeslintの「ランナー」ですか?

"scripts": { 
    "build": "NODE_ENV=production webpack -p --config webpack.production.config.js --progress --profile --colors", 
    "dev": "webpack-dev-server --progress --profile --colors --hot" 
}, 

それはいくつかのスターターキットからであり、それはうまく動作します。私はnode run devを実行することができ、webpackはファイルの変更を監視し、モジュールをリロードします。

これは問題ありません。

しかし!最近私はgulpと仕事をしており、ワークフローは です。gulp watchを開始してください。 1.すべての.jsファイルをすばやく変更します。 2. Gulpは、すべての変更時にbundler(browserify)、eslint、およびtests(phantomjsのカルマとジャスミン)を実行します。

webpack-dev-serverでこのフローを実現することはできますか?または、むしろ(watchifyの代わりに)gulpのタスクの1つとして "watch"フラグを付けたwebpackを使用して、私の流れにとどまるべきでしょうか?

私は本当にこのホットモジュールをリロードする必要はないと思います。私はそれで働いたことがないと私は元気だった(まあ、それは非常に固い議論ではないが、まだ... :))。それは本当にそのスーパー機能です、私はwebpack-dev-serverを実行し、別のターミナルウィンドウでタスクを拾うべきでしょうか?

アイデア?

答えて

1

Webpack 2は、ESLintでツリーシェイク機能を使用してください。開発中にコードの品質とアクセラレーションを必要とするものもあります。

最初に選択できるのは、以下のようにESLintを使用して(package.json内で)別々のnpmタスクを使用することです。それは、それをリンティング(「試験」正規表現で宣言された)あなたのコード内で変更イベントをリスニングされます。

"lint": "eslint <your-path-through-codes>" 

それがバックグラウンドで実行されている間、あなたが継続的にあなたのコードを開発し、もう一度コードをリファクタリングすることができますし、再び。

あなたは次のような構成を実現することができます

new webpack.LoaderOptionsPlugin({ 
    test: /\.js$/, 
    loader: 'eslint-loader', 
    exclude: /node_modules/, 
    configFile: './.eslintrc' 
}) 
+1

は実は、私は、NPMのスクリプトを使用することを決めた、と私はWebPACKの実行するスクリプト「DEV」を持って、テスト、リンタースクリプトは、NPM-実行-すべて」を使用して" – kzg

関連する問題