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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

亚连

Jun 11, 2018 pm 05:31 PM

vueパック

この記事では主に、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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

See all articles