参考記事
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+の機能を使えるようになり、モダンな開発ではBabel等のツールが必須のものとなりました。
ただ、トランスパイルされたものはオリジナルに比べて時に冗長で、しかもパースして起動するのも遅いです。
素晴らしいことに最近では多くのブラウザが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