Vue CLI 3は前のバージョンとこんなにも違うぜ

f:id:kai1233:20180811133023p:plain Qiitaに投稿した記事をブログにも投稿します。

参考記事

Vue CLI 3.0について、Vue.jsの開発者Evan Youさんが記事を書いていました。 Vue CLI 3.0 is here これを読んでわかったVue CLI 3.0の素敵な機能たちを紹介します🔥🔥

Vue CLI 3.0は何が前のバージョンと違うか

「Vue CLI3は前のバージョンと全く違うぜ!」と語るEvan氏、以下の2点に力を入れて開発していたそうです。 1. モダンなフロントエンドのツール、特に複数のツールを合わせて使うための設定をもっと楽にした 2. どんなVueのアプリでもデフォルトとして使えるようなツールチェインのベストプラクティスを組み込んだ

実装された機能

今回は事前に設定されたWebpack4が提供されており、開発者が行う設定は最小限のものになっているとのこと。

プロジェクトを作成するだけで以下の機能がサポートされている

Webpack

  • Hot module replacement
  • code-splitting
  • ree-shaking
  • efficient long term caching
  • error overlays

などが設定済み

トランスパイラ

  • ES2017のtranspliation
  • Polyfills injection via Babel 7 + prese-env

CSS

PostCSS( デフォルトで自動修正機能付き)、すべてのメジャーなCSSプリプロセッサのサポート

HTML

Assetのリンクとリソースをpreload/prefetchするヒント付きのHTMLを自動生成

開発モードが追加されました

モダンモード

ネイティブなES2017、bundleそしてレガシーなbundleを平行して使えるモード(詳しくはあとで)

マルチページモード

アプリケーションをHTML/JSの複数のエンドポイントを使って開発できるモード

Build targets

Vueのシングルファイルコンポーネントをライブラリやネイティブアプリのコンポーネントに組み込める

これらに加えて、以下の機能を選択して追加することもできる。 プロジェクトごとにうまく組み合わせて使いましょう!

  • TypeScript
  • PWA
  • VueRouter &Vuex
  • ESLint / TSLint / Prettier
  • JestかMochaを使ったユニットテスト
  • CypressかNightwatchを使ったE2Eテスト

これらの機能がらく〜〜にプロジェクトに追加できちゃう。 最高だぜ🔥🔥

その他の変更点とか

プラグインとプリセットの共有

Evan Youさんら開発チームは、Vue CLIがVue利用者にとってコミュニティを形成する役割を果たしてほしいと思っているそうです。そんな思いもあって以下のような機能が追加された様です。

内蔵されているほとんどプラグインpuginAPIを使っており、このAPIを通じてコミュニティの全てのプラグインが利用可能だそうです。 もちろん個人でプラグインを作成して他の開発者と共有することもできるそうです。そのためのガイドはこちら

また、今回のバージョンからTemplateはなくなったそうです。しかし、そのかわりにremote presetを作成可能でプラグインやオプションの設定を他の開発者と共有できます。

GUIが登場

Gulliaume CHAUさんによって素晴らしいGUIが利用可能になりました⭐

このGUIは新しいプロジェクトの作成だけでなく、プラグインやプロジェクトのタスク管理もできるそうです! しかも、Webpackのダッシュボードも表示される。ひょぇ〜〜

注:Vue CLI 3は安定版が公開されましたが、このGUIについてはまだBeta版なのでそこだけ少し注意を!とEvan氏が述べていました。

モダンモード

先程ご紹介したモダンモードについて少し詳しく。Babelによって私達は最新のES2015+の機能を使えるようになり、もはやこのツールは必須のものとなりました。

ただ、トランスパイルされたものはオリジナルに比べて時に冗長で、しかもパースして起動するのも遅いです。

素晴らしいことに最近では多くのブラウザがES2015+をサポートしています。これらのブラウザに重くて冗長なコードを走らせるのは馬鹿らしいですよね。そこでモダンモードの登場です。

モダンモードでプロジェクトを作成するには以下のコマンドを入力してください。 vue-cli-service build --modern するとVue CLIは2種類のアプリケーションを作成します。ひとつはモダンブラウザ向けのES modulesをサポートしたもの、もう一つ古いブラウザ向けのものです。

開発上は何も意識することはないそうです。ただ自動でHTMLファイルが生成されて、Philip Waltonの素晴らしい記事で言及されたテクニックが適応されるそうです。

  • モダンなbundleには<script tye="module">を記述しよう。もしブラウザがES modulesをサポートしてたら<link rel="modulepreload">を使って事前に読み込もう
  • レガシーなbundleには<script nomodule>を記述しよう。これはES modulesをサポートしてたら無視される
  • Safari 10で<script nomodule>の問題を解決するために、自動でinjectedされるようにしよう

Hello Worldのアプリケーションでさえ、モダンなbundleは16%もファイルサイズが小さいらしい。これはえらい違いだ。プロダクション環境では明らかな違いが現れるでしょう。

Web Componentsで開発しよう

すべてのvueファイル内でweb componentを利用することができます。コマンド例は以下の通り。 vue-cli-service build --target wc --name my-element src/MyComponent.vue これだけでvueコンポーネントがネイティブなカスタムエレメントとして登録されたJavaScriptのbundleが生成される。

Code-splitもラクラク

code-splitも以下のコマンドだけで楽に追加できる。 vue-cli-service build --target wc-async 'src/components/*.vue'

さぁ!Vue CLI3をつかいましょ〜〜🔥

Evan You氏は最後に「Vue CLIがプリセットや未来のツールチェインのベストプラクティスになるのが目標」と語っていました。

これからもVue CLIの進化が楽しみですね。

引用元: Vue CLI 3.0 is here

参考リンク:Vue CLI 3