vue の webpack -v エラー解決の概要

vue の webpack -v エラー解決の概要

XiaobaiはVueについて学び、次にwebpackについて学び、そしてさまざまなものをインストールしました

cnpm は国産ソースなので海外ソースよりはるかに高速です。cnpm について知らない方は自分で調べてみてください。

cnpm インストール -g webpack

しばらくするとインストールが成功し、webpackのバージョンを確認したい

webpack-cliをインストールするように促されるので、インストールします

cnpm インストール -g webpack-cli

しばらくするとインストールされます。再度 webpack -v で見ると、以下のエラーが報告されます。

$ ウェブパック -v
C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\lib\groups\resolveConfig.js:105
        await (constresolvedOption of finalizedConfigs) {
            ^^^^^
構文エラー: 予期しない予約語
    NativeCompileCache._moduleCompile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\[email protected]@v8-compile-cache\v8-compile-cache.js:240:18) で
    Module._compile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\[email protected]@v8-compile-cache\v8-compile-cache.js:184:36) で
    Object.Module._extensions..js (module.js:664:10) で
    Module.load (module.js:566:32) で
    tryModuleLoad (module.js:506:12) で
    Function.Module._load (module.js:498:3) で
    Module.require (module.js:597:17) で
    要求時 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\[email protected]@v8-compile-cache\v8-compile-cache.js:159:20)
    オブジェクト <anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\lib\webpack-cli.js:14:32)
    Module._compile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\[email protected]@v8-compile-cache\v8-compile-cache.js:192:30) で

インストールされているパッケージを確認するには、npm list --depth=0 -g を使用します。
私もさまざまなバージョンを印刷しましたが、2 つのエラーが報告され、長年の経験を持つプログラマーとして非常に残念に思いました。

$ npm リスト --depth=0 -g
C:\Users\Administrator\AppData\Roaming\npm
6.1.1 より前のバージョン
+-- [email protected]
+-- [email protected]
[email protected] より前のバージョン

npm ERR! C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@[email protected]@@webpack-cli でエラーが発生しました: ENOENT: そのようなファイルまたはディレクトリはありません。'C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@[email protected]@@webpack-cli\package.json' を開いてください
npm ERR! C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@[email protected]@@webpack-cli でエラーが発生しました: ENOENT: そのようなファイルまたはディレクトリはありません。'C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@[email protected]@@webpack-cli\package.json' を開いてください

そこでよく見てみると、package.json ファイルが欠落していたので、新規作成したところ、読み込めないとエラーが報告されました。当然、中身が空っぽだと読み込めません。ファイルのないパスを求められる別のディレクトリにファイルがあったので、この階層にコピーして各パッケージのバージョンを確認してみました。エラーは出ませんでしたが、webpack -v はやはり機能せず、上記エラーが報告されました。webpack と webpack-cli のバージョンが一致していないのが問題なのではないかと思います。

バージョンコマンドを確認します:

cnpm で Webpack のバージョンを表示する

印刷されたバージョンが多すぎてここにはリストできません。確認したところ、私のコンピューター上のバージョンは 4.19.0 で、最新バージョンは 5.4.0 であることがわかりました。

cnpm で webpack-cli のバージョンを表示する

webpack-cli の最新バージョンは 4.2.0 です。

おそらくバージョンの非対称性が原因です。

次に、webpack-cli をアンインストールして再度インストールします。

cnpm アンインストール weabpack-cli

「0.029 秒で最新になりました」とだけ出力され、あまり役に立ちません。npm list --depth=0 -g を使用して、[email protected] がまだ存在することを確認します。

次に、webpack-cliの指定されたバージョンをインストールする方法を調べました

今見たものの古いバージョンを見つけてください。

cnpm インストール -g [email protected]

インストールが成功した後

npm list --depth=0 -g を確認すると、印刷は正常で、エラーは報告されません。

$ npm リスト --depth=0 -g
C:\Users\Administrator\AppData\Roaming\npm
6.1.1 より前のバージョン
+-- [email protected]
+-- [email protected]
[email protected] より

その後、webpack -vを再度使用すると、エラーは報告されず、正常に表示されます。

$ ウェブパック -v
4.19.0

今のところピットクライミングは成功しています〜

昔、node.jsのバージョンによって落とし穴が多いという記事を読みました。npmで管理されているツールのバージョンも同様です。まだ学習もしていないのに、せっかくの学習が無駄になりそうです。プログラマーの道はこんなにも険しいのか! ! !

これで、vue の webpack -v エラーの解決方法の概要に関するこの記事は終了です。vue の webpack -v エラーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • webpack -v エラー解決
  • Electron-vueはwebpackを使用して複数ページのエントリファイルをパッケージ化します
  • Webpack-cliが正常にインストールされたら、詳細についてはwebpack -vエラーケースを確認してください。

<<:  SQL Server データベース エラー 5123 の解決方法

>>:  Alibaba Cloud によって追加されたセキュリティ グループ ポートと、追加後にアクセスできない問題のトラブルシューティング

推薦する

ウェブカラーのコントラストと調和のテクニックの共有

色のコントラストと調和対照的な状況では、色の相互作用は単一の色によって与えられる感覚とは異なります。...

VMware esxi6.5 のインストールと使用の詳細な手順

目次導入建築ESXIの利点vSphere とは何ですか? 2. 仮想マシンの利点3. 仮想マシンを使...

MySQL インデックスの長所と短所、およびインデックス作成のガイドライン

1. インデックスを作成する理由(メリット)インデックスを作成するとシステムのパフォーマンスが大幅に...

JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します

オブジェクトがメソッドを呼び出す順序:インスタンス内にメソッドが存在しない場合は、インスタンス オブ...

Vueプロジェクトをパッケージ化してリリースする手順

目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...

Ubuntu環境でのSSHの詳細なインストールと使用

SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

MySQLオンラインログライブラリの移行例

最近の事例をお話ししましょう。オンライン Alibaba Cloud RDS 上のゲーム ログ ライ...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

Linux でユーザーを完全に削除する 2 つの方法

Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...

ウェブサイトのユーザーエクスペリエンスデザイン(UE)

Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

docker compose の記述ルールについての簡単な説明

この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...

C# は MySQL コマンドラインのバックアップとリカバリを実装します

MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...

HTML の blockquote タグの使用と美化

ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...