Windowsでgulp + babel + webpack 環境作ってみた
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
問題点1:警告が表示している
npm install 終了後、3つほど警告が出ていました。そのうちの一つがこちら
オプション設定足りないエラー
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
残り2つの警告はこちら
サポートしてないプラットフォームエラー
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"}
)
この2つの警告は関係してそうなので検索して以下ページを発見。
https://stackoverflow.com/questions/46929196/how-to-solve-npm-install-throwing-fsevents-warning-on-non-mac-os
単純に、Windowsに対応してない機能が入らなかったという警告っぽいのでこっちは無視しました。
問題点2:gulpがコマンドとして認識されない
コマンドプロンプトを管理者として実行し、 npm i -g gulp
でグローバルインストールするとうまくいきました。
https://skyblue-js.com/post-56/
問題点3: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は有効化しないけど、これから開発なので)
問題点4:Cannot find module '@babel/core' babel/core
問題点1のときの警告で、見逃していたけど最後にこの警告がありました。
npm WARN [email protected] 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にまとめてくれる安心環境。
Author And Source
この問題について(Windowsでgulp + babel + webpack 環境作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/ChurappsWatatani/items/9798cb28e83242b9e032著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .