Vue がパッケージ化ツールを構成する方法の詳細な説明-jsチュートリアル-php.cn

Vue がパッケージ化ツールを構成する方法の詳細な説明

亚连

リリース： 2018-06-11 17:31:27

オリジナル

2742 人が閲覧しました

この記事では主に、Vue の高速ゼロ構成パッケージングツールである Parcel の詳細な説明を紹介します。

この記事では、Vue の高速なゼロ構成パッケージングツールである Parcel を紹介し、それを皆さんと共有します。詳細は次のとおりです:

機能

クイックパッケージ化
すべてのリソースをパッケージ化
変換
コード分割
モジュールのホットリプレース
フレンドリーなエラーログ

仕組み

Parcel は、リソースツリーをバンドルツリーに変換します。他の多くのパッケージ化ツールは基本的に JavaScript リソースに基づいており、他の形式のリソースが付属しています。たとえば、JS ファイル内の文字列にインライン化します。 Parcel はファイルタイプに依存せず、あらゆるタイプのリソースを想定どおりに操作でき、構成は必要ありません。

リソースツリーの構築

Parcel は、JS、HTML、CSS、画像ファイルなど、任意のタイプの単一エントリリソースを入力として受け入れます。 Parcel にはさまざまなリソースタイプが定義されており、Parcel は特定のファイルタイプの処理方法を認識しています。リソースが解析され、リソースの依存関係が抽出され、リソースは最終的にコンパイルされた形式に変換されます。このプロセスにより、リソースツリーが作成されます。

ファイルバンドルツリーの構築

リソースツリーが構築されると、リソースはファイルバンドルツリーに配置されます。まず、エントリリソースがファイルバンドルに作成され、次に動的 import() がサブファイルバンドルに作成され、コード分割がトリガーされます。異なるタイプのファイルリソースが導入されると、兄弟ファイルバンドルが作成されます。たとえば、CSS ファイルを JavaScript に導入すると、CSS ファイルは JavaScript ファイルに対応する兄弟ファイルバンドルに配置されます。リソースが複数のバンドルによって参照される場合、そのリソースはバンドルツリー内の最も近い共通の祖先に昇格されるため、リソースは複数回パッケージ化されません。

パッケージ化

ファイルバンドルツリーが構築された後、各ファイルバンドルはパッケージャーによって特定のファイルタイプのファイルに書き込まれます。パッケージャーは、各リソースのコードを、最終的にブラウザーによって読み込まれるファイルに結合する方法を知っています。

構成

初期化プロジェクト

 npm install -g parcel
 mkdir xxx && cd xxx && npm init -y

ログイン後にコピー

変換

Babel

npm install babel-preset-env --save-dev

ログイン後にコピー

ルートディレクトリ構成.babelrc

 {
  "presets": ["env"]
 }

ログイン後にコピー

PostCSS

npm install postcss-modules autoprefixer --save-dev

ログイン後にコピー

ルートディレクトリ構成.postcssrc

 {
  "modules": true,
  "plugins": {
   "autoprefixer": {
    "grid": true
   }
  }
 }

ログイン後にコピー

サポートvue

npm install parcel-plugin-vue --save-dev

ログイン後にコピー

エントリを追加

 import App from &#39;./App.vue&#39;
 import router from &#39;./router/index.js&#39;
 import &#39;./assets/js/rem.js&#39;
 window.onload = () => {
  const vm = new Vue({
   el: &#39;#app&#39;,
   router,
   render: h => h(App)
  })
 }

ログイン後にコピー

設定index.html

 <body>
  <p id="app"></p>
  <script src="入口文件"></script>
 </body>

ログイン後にコピー

ルーティングの設定(コード分割 - 遅延読み込み)

 {
   path: &#39;home&#39;,
   component: () =>import(&#39;../pages/home.vue&#39;)
 }

ログイン後にコピー

import()はPromiseを返すので、ローカルでasync/await構文を使いたい場合はbabelを導入してください。 -polyfill

本番環境と開発環境を区別するには、package.json.

dev --- 開発環境

build --- 本番環境

 "scripts": {
   "dev": "parcel index.html -p 3700",
   "build": "parcel build index.html"
  }

ログイン後にコピー

Done

http://localhost:3700/home にアクセスしてください

このデモは、vue+parcel+grid+stylus:parcel-vueで完成しました

上記は、皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。

vue.js で select の値を取得する方法 (詳細なチュートリアル)

Vue でスロットを使用してスロット配布コンテンツを実装する方法

vue でカプセル化を実装する方法再利用されたコンポーネント

JavaScriptで日時差を判定する方法

vue2.0の子コンポーネントのpropsの値を変更して親コンポーネントに値を渡す方法

以上がVue がパッケージ化ツールを構成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。