Parcel.js + Vue 2.x で非常に高速なゼロ構成パッケージングを実現する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Parcel.js + Vue 2.x で非常に高速なゼロ構成パッケージングを実現する方法

亚连

Jun 15, 2018 pm 05:30 PM

vue

この記事では主に Parcel.js + Vue 2.x の非常に高速なゼロ構成パッケージングエクスペリエンスの関連情報を紹介します。必要な方は参考にしてください

Browserify と Webpack に続いて、別のパッケージングツール Parcel が判明しました

Parcel The .js の公式 Web サイトには、「非常に高速な設定ゼロの Web アプリケーションパッケージングツール」という自己紹介があります

簡単に触ってみたところ、効率の点では確かに webpack よりもはるかに優れていますが、落とし穴もたくさんあるはずです。将来的にはアップグレードされる予定です徐々に人気が出てくるでしょう

公式ドキュメント: https://parceljs.org/getting_started.html

公式 GitHub: https://github.com/parcel-bundler/parcel

1.基本的な使い方

Parcelのインストールにはnpmかyarnを使用します

まずParcel.jsをグローバルにインストールする必要があります。 .0

npm install -g parcel-bundler

それから設定ファイルを書きます...いいえ、これはWebpackではありません、これはパーセル、ゼロ設定パッケージです

プロジェクトディレクトリを直接作成し、それを使用して単純な従来のページを作成します

それからコマンドラインを開きますプロジェクトのルートディレクトリにあるツールで、次のコマンドを入力します

parcel index.html -p 3030

次に、ブラウザで http を開きます: //localhost:3030/ で、開発したばかりのページが開きます

上記のコマンドでは、-p を使用してポート番号を設定します設定されていない場合、デフォルトでポート 1234 が開始されます

parcel はホットアップデートをサポートし、HTML、CSS、JS の変更とインスタントレンダリングを監視します

// 実際、src を通じて導入された CSS と JS はホットアップデートできません

開発が完了したら、次のコマンドを入力してパッケージ化します

parcel build index.html

パッケージ化後にdistディレクトリが生成されます

Qiaodouの袋、同意しましたパッケージングはどうしますか？なぜまだこれほど多くのファイルがあるのでしょうか?

心配しないでください。このページには package.json さえありません。次に、これをモジュール型プロジェクトに変換すると、パッケージ化の効果がわかります。最初に手動で開きます。index.html 効果を見てください...待ってください...CSS が読み込まれていないのはなぜですか?

これは、パッケージ化されたパスがすべて絶対パスであるため、サーバー上に配置しても問題はありません。ローカルで開く必要がある場合は、手動で相対パスに変更する必要があります

2. モジュール形式のアプリケーション。プロジェクト長編映画開始するには、まず上記のプロジェクトをモジュラープロジェクトに変換します

npm init -y コマンドを使用してデフォルトの package.json を作成し、起動コマンドとパッケージ化コマンドを変更します

npm run dev を直接使用できるようにするため、プロジェクトを開始し、 npm run build でパッケージ化されたパッケージを実行します npm init -y 命令创建一个默认的 package.json，并修改启动和打包命令

这样就可以直接通过 npm run dev 启动项目，npm run build 执行打包了

之前是全局安装的 parcel，实战中更推荐在项目中添加依赖

npm install parcel-bundler -S

上面是一个传统页面，使用 link 引入的 css

既然要改造为模块化项目，那就只需要引入一个 main.js，然后在 main.js 中引入其他的 css 和 js 文件

所以需要用到 import 等 ES6 语法，那就安装一个 babel 吧

npm install babel-preset-env -S

然后在根目录创建一个 .babelrc 文件，添加以下配置：

{
 "presets": ["env"]
}

再安装一个 css 转换工具，比如 autoprefixer

npm install postcss-modules autoprefixer -S

创建 .postcssrc 文件：

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

官方文档还推荐了一款编译 html 资源的插件 PostHTML，不过这里暂时不需要

自行改造代码，最后 npm run build

以前は、実際にはグローバルにインストールされたパーセルでした。プロジェクトに依存関係を追加することをお勧めします

<!-- index.html -->
<body>
 <p id="app"></p>
 <script src="./src/main.js"></script>
</body>

// main.js

import &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./css/common.css&#39;

Vue.config.productionTip = false

const vm = new Vue({
 el: &#39;#app&#39;,
 router,
 render: h => h(App)
})

上記は従来のページです。リンクで紹介されているCSSを使用してください

モジュール型プロジェクトに変換したいので、main.jsを導入するだけで済みます。 main.js に他の css および js ファイルを導入しますしたがって、import などの ES6 構文を使用する必要があります。次に、babel をインストールします

{
 "name": "ParcelVue",
 "version": "1.0.0",
 "description": "The project of parcel & vue created by Wise Wrong",
 "main": "main.js",
 "scripts": {
 "dev": "parcel index.html -p 3030",
 "build": "parcel build index.html"
 },
 "keywords": [
 "parcel",
 "vue"
 ],
 "author": "wisewrong",
 "license": "ISC",
 "devDependencies": {
 "autoprefixer": "^7.2.3",
 "babel-polyfill": "^6.26.0",
 "babel-preset-env": "^1.6.1",
 "parcel-bundler": "^1.3.0",
 "parcel-plugin-vue": "^1.4.0",
 "postcss-modules": "^1.1.0",
 "vue-loader": "^13.6.1",
 "vue-style-loader": "^3.0.3",
 "vue-template-compiler": "^2.5.13"
 },
 "dependencies": {
 "vue": "^2.5.13",
 "vue-router": "^3.0.1"
 }
}

次に、ルートディレクトリに .babelrc ファイルを作成し、次の設定を追加します。 autoprefixer などの CSS 変換ツールをインストールします

rrreee

.postcssrc ファイルを作成します:

rrreee

公式ドキュメントでは、HTML リソースをコンパイルするプラグイン PostHTML を使用することも推奨していますが、最後に、npm run build がパッケージ化され、その内容も autoprefixer でコンパイルされていることがわかります

3. Parcel の使用Vueプロジェクトで

公式ドキュメントにはreactプロジェクトに適した式が記載されています

でも私は普段vueを使ってます

長い間調べた結果、やっと見つけた方法です

まだ入り口としてindex.htmlを使用していますので、紹介します。 main.js とスクリプト:

rrreeeここで、私は非常に強力なプラグイン、parcel-plugin-vue をお勧めしたいと思います。これにより、parcel と vue がうまく連携できるようになります

前に述べた babel に加えて、autoprefixer、最後のpackage.json は次のようになります:

rrreee必ずルートディレクトリに .postcssrc および .babelrc ファイルを作成することを忘れないでください

その後、npm install で依存関係がインストールされ、npm run dev でプロジェクトが開始され、npm run build でプロジェクトのパッケージが作成されます

上は私です。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

Vueで背景画像を設定する

vueパッケージ化後の無効な静的リソース画像の問題を解決する方法

vue-routerとexpressプロジェクトをサーバーにデプロイする方法

Vue 2.5.2でaxios + Expressを使用した404ローカルリクエストの解決策

🎜🎜🎜vueとreactを使用して展開と折りたたみの効果を実現🎜🎜🎜🎜vueでWebpackパッケージの最適化を実装する方法🎜🎜🎜🎜vueコーディングの詳細な説明スタイル🎜🎜

以上がParcel.js + Vue 2.x で非常に高速なゼロ構成パッケージングを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

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の実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles