検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Vue がパッケージ化ツールを構成する方法の詳細な説明

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

亚连
亚连オリジナル
2018-06-11 17:31:272759ブラウズ

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

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

機能

  1. クイック パッケージ化

  2. すべてのリソースをパッケージ化

  3. 変換

  4. コード分割

  5. モジュールのホットリプレース

  6. フレンドリーなエラーログ

仕組み

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 './App.vue'
 import router from './router/index.js'
 import './assets/js/rem.js'
 window.onload = () => {
  const vm = new Vue({
   el: '#app',
   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 サイトの他の関連記事を参照してください。

JavaScript json css vue.js stylus html 封装 select 字符串 JS promise http
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Parcelを使った梱包方法次の記事：Parcelを使った梱包方法

関連記事

続きを見る