Windowsでgulp + babel + webpack 環境作ってみた
今までmacを使ってたのですが、この度Windowsを使うことになったのでまとめてみます。
なんかWindowsと関係ないところではまったりもしたのですが・・・；
まずは node.js のインストールから
何も考えずに公式ページからインストーラーを落としてきてインストールすることもできますが、今後のことを考えるならnode.js用のパッケージ管理ソフトを入れて管理ソフトからバージョン指定してインストールしたほうがよさそうです。
https://qiita.com/satoyan419/items/56e0b5f35912b9374305
ということで上記ページを参考に、nodistを入れて現在の推奨バージョン8.12.0を入れてみました。
あとは対象プロジェクトのフォルダでコマンドラインからnpm initして初期化完了。
※Gitを使ってプロジェクト管理をするなら、.gitignoreには /node_module/を入れるべき。
gulpとbabelとwebpackをインストールする
ここは参考サイトの通りにまずやってみる
https://glatchdesign.com/blog/web/tools/1724
問題点１：警告が表示している
npm install 終了後、３つほど警告が出ていました。そのうちの一つがこちら
オプション設定足りないエラー
Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
どうやら、nodistを使ったことで表示する警告の様子。npm で指定されたオプションをオンにするようにという警告だったので、以下ページを参考にオプションを変更。
https://qiita.com/isamusuzuki/items/738a2736a746b67bd977
残り２つの警告はこちら
サポートしてないプラットフォームエラー
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
この２つの警告は関係してそうなので検索して以下ページを発見。
https://stackoverflow.com/questions/46929196/how-to-solve-npm-install-throwing-fsevents-warning-on-non-mac-os
単純に、Windowsに対応してない機能が入らなかったという警告っぽいのでこっちは無視しました。
問題点２：gulpがコマンドとして認識されない
コマンドプロンプトを管理者として実行し、 npm i -g gulp でグローバルインストールするとうまくいきました。
https://skyblue-js.com/post-56/
問題点３：webpack.optimize.UglifyJsPlugin has been removed
webpack3から4に移行したタイミングで、webpack.optimize.UglifyJsPluginは廃止になって、モード変更するだけで有効化するようになったとのこと。
https://qiita.com/shisama/items/730e7a2e6a3090a63a38#%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%93%E3%83%AB%E3%83%89
UglifyJsPluginを削除して、とりあえずmode: developmentにしました。（このモードだとUglifyは有効化しないけど、これから開発なので）
問題点４：Cannot find module '@babel/core' babel/core
問題点１のときの警告で、見逃していたけど最後にこの警告がありました。
npm WARN babel-loader@8.0.2 requires a peer of @babel/core@^7.0.0 but none was installed.
babel/core入れたはずなのに・・・と思ってpackage.json確認したところ、必要バージョンより低いbabel/coreが入ってた様子。
じゃあ、と思ってバージョン指定を^7.0.0に指定したらエラー。
babel公式ページを見たら最新バージョンは7.1.0。何かおかしいと思っていろいろ調べてみたところ、npm installするときのパッケージ名指定が参考サイトだと低いバージョン用のパッケージ名だった様子。
https://github.com/babel/babel-loader
このページにある以下のインストールコマンドを指定したところ、問題なくエラーが消えました。
npm install -D babel-loader @babel/core @babel/preset-env webpack
やっと・・・
gulpが通った・・・！
あとは、 /src/js/以下のjsファイルが変更かかれば自動ビルドしてbundle.jsにまとめてくれる安心環境。