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 によって追加されたセキュリティ グループ ポートと、追加後にアクセスできない問題のトラブルシューティング

推薦する

純粋なCSSでは、子要素が親要素の幅制限を突破できる。

文章のスタイルでは、このような状況がよく見られます コードは次のとおりです <div styl...

暗号化における https の Apache 展開の概要

目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...

Tomcatがセッションを管理する方法の例

ConcurrentHashMapを学習しましたが、どのように適用すればよいかわかりませんか? To...

Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する

Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...

HTML Webページ作成チュートリアル iframeタグを慎重に使用してください

iframe を使用すると、他の Web サイトのページを簡単に呼び出すことができますが、注意して使...

Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法

HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...

Linuxコマンドに基づいてフォルダー内の特定のファイルパスを抽出します

最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...

JavaScript の 7 つのデータ型の詳細な説明

目次序文:詳しい紹介:練習する:要約する序文: Python、Java、Cシリーズなど、すべての主要...

Nginx 構成検出サービスのステータスを実装する方法

1. チェックステータスモジュールがインストールされているかどうかを確認します。 [root@loc...

CentOS で MySQL を完全にアンインストールする方法

この記事では、CentOSでのMySQLの完全アンインストールについて記録しています。具体的な内容は...

docker compose helloworld を使い始めるための詳細なプロセス

前提条件Compose は、Docker コンテナをオーケストレーションするためのツールです。Doc...

Linuxサーバー間のリアルタイムファイル同期の実現

使用シナリオ既存のサーバー A と B の場合、サーバー A の指定されたディレクトリ (たとえば、...

Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...