Vue CLI & WebpackからViteresへの移行

10834 ワード
vue opensource vite javascript テキストリンク

郵便Migrating From Vue-CLI & Webpack to Vitejs 初登場Qvault .
Qvault’s web app that hosts all of my coding courses Vue 3に書かれた1ページのアプリケーションは、すぐにVue™©®. その間、私はクールな新しいツールのアプリで起こったVite それは私の注意を引くいくつかのことを約束した.
  • ほぼ瞬時の開発サーバ起動時間
  • 箱のホットモジュール交換
  • 簡単な設定
  • ESモジュールのボックスサポートから
    • これは特に私と共鳴されたので、私の(簡単な)シンプルなアプリの開発サーバーはVue-cli and Webpack , そして、私は過去に多くの時間をWebpackBabel , 私が基本的なVue構成を必要としたとき.私が移行ガイドに飛び込む前に、いくつかの迅速な逸話比較を見てみましょう、それで、あなたが交換の利益があなたのためにそれの価値があるかどうかわかることができます.
    ベーテ
    Vue CLI +ウェブパック
    サーバ起動時間
    〜600 ms
    - 10000ミリ秒
    HMRタイム
    不明な場合は、インスタント表示されます
    - 2000 MS
    生産時間
    - 15 s
    - 22 s
    バンドルされたJSファイルの数
    29 JSモジュール
    18 JSモジュール
    平均JS束サイズ
    - 29 KB
    - 61 KB
    合計JS束サイズ
    - 840 KB
    - 1098 KB
    VITE VS Vue CLI + WEBACE
    さらに、Vue CLIとWebpackを使用して上記の18個のモジュールを得るために、私はコメント注釈を加えなければなりませんでしたroutes.js ファイル.箱の外で、Vue Cliは1つの巨大な束を作ります.そして、それはページパフォーマンス理由のために非常により悪いです.VITEはそれらの迷惑な注釈を必要とせずにモジュールの行に沿ってバンドルを分割します.

    移行ガイド


    Vue CliからViteまでVue 2でプロジェクトを実際に動かす主要なステップを通して行こう.

    ステップ1 -依存関係


    すべて@vue-cli... 依存性は行く必要がある.私のために、それは以下を除くことを意味しました.
    - "@vue/cli-plugin-babel": "^4.5.6",
- "@vue/cli-plugin-eslint": "^4.5.6",
- "@vue/cli-service": "^4.5.6",
    これらはVITEとVueのプラグインに置き換えられました.
    + "vite": "^2.2.1",
+ "vite-plugin-vue2": "^1.4.4",
+ "@vue/compiler-sfc": "^3.0.11",
    次に、viteサポートsass 箱から出たので、私は古い依存関係を取り除くことができました.
    - "node-sass": "^4.12.0",
- "sass-loader": "^10.0.2",
    そして、私は彼らを裸の骨と入れ替えましたsass VITEが利用できるようにするため、コンパイラ.
    + "sass": "^1.32.11",
    最後に、VITEは現代のブラウザをサポートしているので(残念ながら、レガシーなものをサポートしなければならない場合は、VITEはあなたのためではないかもしれません)私はBabelの依存関係と私のbabel.config.js ファイル.
    - "babel-eslint": "^10.1.0",
- "babel-runtime": "^6.26.0"

    移動インデックスHTML


    Viteはストアしないindex.html にpublic あなたのようなフォルダを使用すると、代わりにそれは右のプロジェクトのルートに移動するので、そこに移動します.Viteも追加のエントリポイントが必要です.
    <body>
  <noscript>
    <strong>
      We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.
    </strong>
  </noscript>
  <div id="app"></div>

  <!-- this new script is for vite -->
  <script type="module" src="/src/main.js"></script>
</body>
    また、単純な使用するために静的資産参照を移動する必要があります/ むしろ<%= BASE_URL %> .
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

    VITE設定


    ここではvite.config.js 私は落ち着いて、それはプロジェクトの根源にある.
    import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import path from 'path';

export default defineConfig({
  plugins: [createVuePlugin()],
  server: {
    port: 8080
  },
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
  build: {
    chunkSizeWarningLimit: 600,
    cssCodeSplit: false
  }
});
    The resolve ブロックを使用してコンポーネントをインポートできます@ のルーツとしてsrc ディレクトリ.例えば、import Tooltip from '@/components/Tooltip.vue'; .
    The build ブロックは、最初に、それは500 KBのデフォルトから600 KBまでのチャンクサイズ警告制限を増加させます.私は本当に重いコードエディタコンポーネントを持っていると私は毎回警告を見たくないので、それをした.
    第二に、私のサイトが完全に壊れたときにvite分割私の.css それが欲しかった方法をファイルしてください.これは実際に私を悲しくさせてくれます.なぜなら、必要なときに必要なCSSをユーザに負担させたいからです.誰もが同じような問題を抱えている場合はどのように解決したか教えてください.

    Vue拡張モジュール


    VITEは明らかにすべてを必要とする.vue インポートには.vue パスで.これは、拡張子を使用していない場合は少し退屈です.すべてのインポートを更新する必要がありますからimport Tooltip from '@/components/Tooltip' to import Tooltip from '@/components/Tooltip.vue' .

    遅延負荷経路のためのWebpackチャンクキング


    以前はあなたのバンドルを分割するWebPackのコメント注釈を使用した場合は、もうそれをする必要はありません!ちょうどそれらを削除します.const Courses = () => import(/* webpackChunkName: "Courses" */ '@/views/Courses.vue');なるconst Courses = () => import('@/views/Courses.vue');

    糸スクリプト


    私は以下の3つのスクリプトを使用します.
    "serve": "vite --open",
"preview": "vite preview --open --port 8080",
"build": "vite build --out-dir dist",
"lint": "eslint src",
"lint:fix": "eslint src --fix"
  • yarn serve 開発サーバーを起動し、好みのブラウザを開きます.
  • yarn build 生産ファイルをビルドしてdist
  • yarn preview テストのためにローカルに生産ファイルを提供します
  • yarn lint ランeslint そして、問題を報告します.あなたはおそらく使用していたvue-cli-service lint ちょうど前にeslint フードの下.

    • ノード環境


    それが来るとき、Viteは厳しいですNode.js コードは、フロントエンドのバンドルにスリップされている.私は依存していた問題に出くわしたglobal 定義する.明らかに、最善のことはそれのような依存関係を必要としないことです、しかし、私のケースで私はそれを必要としましたindex.html .
    <!-- polyfill global because shit dependencies -->
  <script>
    const global = globalThis;
  </script>
<!-- end polyfill -->

    Vue 3


    次のマイグレーションはVue 3になるでしょう.私は本当にもう少し安定性のために、私の依存のいくつかの新しいメジャーバージョンをサポートするために保持している.
    読書のおかげで、今コースを取る!
    ハイテクで高い給料の仕事に興味がありますか?土地のインタビューは、私の手のコーディングコースを取った後に飛んで色でそれらを渡します.
    Start coding now

    質問？


    あなたがどんな質問またはコメントをするならば、フォローして、さえずりの上で私を殴ってください.私が記事の間違いをしたならば、確かにlet me know だから私はそれを修正することができます!
    Subscribe より多くのコーディング記事の私のニュースレターに直接受信トレイに配信.
    Web計算機をテンプレートに結合
    linuxでよく使われるスクリプトと関数の共有