vuecli4 を 5 にアップグレードするときに発生する問題の概要

序文

会社のプロジェクトはvue-cli4を使用して構築されています。最近、依存関係をインストールする必要があります。その後、serve を実行するとき、この依存関係は正常です。パッケージ化後、1 回クリックするのは正常ですが、再度クリックするとエラーが報告されます。後でよく調べたところ、 Webpack のバージョンの問題であることがわかりました。

vue-cli4 はwebpack4をインストールし、vue-cli5 はwebpack5をインストールします。この依存関係パッケージを vue-cli5 にインストールすると、この問題は発生しません。

ということで次のステップはvue-cli4からvue-cli5へのアップグレードですが、クロスバージョンなので書き方や使い方が違うところが多く新鮮なので、この過程をまとめるのは過去の振り返りと学習ということになります。新しい。

文章

まず、vue-cli のグローバル依存関係をアップグレードします。

次のように糸を使用します

js复制代码// npm
npm update -g @vue/cli 
// yarn
yarn global upgrade --latest @vue/cli

アップグレードは成功しました。vue -V を出力して最新バージョンを表示します。

画像.png

次に、vue upgrade を使用して、プロジェクトの cli 依存関係をアップグレードできます (@vue/cli-plugin- または vue-cli-plugin- で開始します)。

その後、対応する依存関係をインストールすると、アップグレードは成功します。

でも大丈夫だと思いますか？

画像.png

ノード-ポリフィル-webpack-プラグイン

webpack4 は、 path、process、osなどのノードのコアモジュールを自動的に導入します。ただし、webpack5はバージョンアップされているため自動で導入されず、手動で導入する必要があります。

したがって、依存関係に参照がある場合、パッケージ化時にエラーが報告されます。

画像.png

この問題を解決する依存関係、node-polyfill-webpack-plugin をインストールできます。

ノードのコアモジュールを自動的に導入し、vue.config.js で設定できます。

js复制代码  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
  // ...省略部分配置
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ]
  },

webpackカスタムプラグイン

以前にプロジェクトに webpack カスタムプラグインを作成しましたが、vue-cli5 をアップグレードした後、パッケージ化エラーが報告されました。

js复制代码  // vue.config.js
  chainWebpack: (config) => {
    // 自定义插件
    config.plugin('customPluginName').use(require('./xx/plugins/xx/xx.js'))
  },
  configureWebpack: {
  }

js复制代码// custom plugin.js
const path = require('path')
class VersionPlugin {
  apply (compiler) {
    compiler.options.entry = {
      ...compiler.options.entry,
      version: './xxx/version.js'
    }
  }
}
module.exports = VersionPlugin

画像.png

webpack5 のドキュメントを確認したところ、エントリ方法がより充実していることがわかりました。

エントリは文字列、文字列オブジェクト、または配列であることがわかります。

js复制代码entry: './app.js'

// or
entry: {
 app: './app.js',
 about: './xxx'
}

これに基づいて、現在の webpack5 は import や dependOn などのフィールドもサポートします。

js复制代码entry: {
 app: {import: './app.js'},
 about: {import:'./xxx', dependOn: 'xxx'}
}

wepback のソースコードの一部を読んだ後、オブジェクトの値が文字列の場合、インポートフィールドを結合し、その値が配列であることがわかりました。次のように：

画像.png

ただし、カスタムプラグイン変更エントリの実行時刻はこの時刻よりも遅いため、インポートがパッケージ化されていない場合はエラーが報告されます。

したがって、カスタムプラグインがエントリを変更したい場合は、エラーを防ぐためにインポートフィールドを結合する必要があります。

js复制代码const path = require('path')
class VersionPlugin {
  apply (compiler) {
    compiler.options.entry = {
      ...compiler.options.entry,
      version: { import: ['./xxx/version.js'] }
    }
  }
}
module.exports = VersionPlugin

コピー-webpack-プラグイン

まず、プロジェクトでは copy-webpack-plugin を使用してファイルをコピーします。vue-cli にはそれが組み込まれていますが、バージョンが異なります。

vue-cli4 はバージョン 5.xx でインストールされ、vue-cli5 はバージョン 9.xx でインストールされます。

js复制代码 // copy-webpack-plugin v5.x.x
 plugins: [
      new CopyWebpackPlugin([{
            from: path.resolve(__dirname, './xx/xx/*.js'),
            to: 'js/[name].[ext]'
          }])
    ]
    
 // copy-webpack-plugin v9.x.x
 plugins: [
      new CopyWebpackPlugin({
         patterns: [{
            from: path.resolve(__dirname, './xx/xx/*.js').replace(/\\/g, '/'),
            to: 'js/[name][ext]'
          }]
      })
    ]

[name].[ext] の 1 つは中央にドットがあり、もう 1 つは中央にドットがないことがわかります。

* を使った書き方もあり、glob マッチングに適応させるために \ を置き換えるには replace を呼び出す必要があります。(* がない場合は、replace を呼び出す必要はありません)

エスリント

eslint を使用している場合、eslintとvue-cli5 のeslint-plugin-vueのバージョンもアップグレードされています。バージョン間のアップグレードにより、多くの eslint ルールが変更されます。以前はエラーはありませんでしたが、現在は次のようなエラーが報告されます。クレイジー。

画像.png

たとえば、コンポーネントの名前には単一の単語を使用できません。nextTick では await と callback を同時に使用できません。また、props によって渡されたオブジェクトのキーを割り当てたり変更したりすることはできません。

これら 170 件の eslint エラーを修正するのはとても爽快です。

要約する

上記は、vuecli4 を 5 にアップグレードするときに発生する問題の概要です。絶対に必要な場合を除き、古いプロジェクトを直接アップグレードしないことをお勧めします。そうしないと、修正を待つバグが多数発生します。新しいプロジェクトでは vue-cli5 を使用することをお勧めします。。

言うまでもなく、eslint のバグの修正はまだ完了しておらず、現在も修正中です。。。