ホームページ > 記事 > ウェブフロントエンド > Parcel.js および Vue 2.x の非常に高速なゼロ構成パッケージング エクスペリエンスの例
Parcel.js および Vue 2.x の非常に高速なゼロ構成パッケージング エクスペリエンスの例
- 小云云オリジナル
- 2017-12-25 14:51:261788ブラウズ
Browserify と Webpack に続いて、Parcel という別のパッケージング ツールが誕生しました。Parcel.js の公式 Web サイトには、「非常に高速なゼロ構成の Web アプリケーション パッケージング ツール」という自己紹介があります。この記事では主に Parcel.js + Vue 2.x の非常に高速なゼロ構成のパッケージング エクスペリエンスに関する情報を紹介します。必要な方はぜひ参考にしてください。
簡単に触ってみたところ、効率の点では webpack よりもはるかに優れていますが、落とし穴もたくさんあります。将来のアップグレードの後、徐々に人気が高まるはずです
公式ドキュメント: https://parceljs.org/getting_started。 html
公式GitHub: https://github.com/parcel-bundler/parcel
1. 基本的な使い方
Parcelはnpmの使い方に慣れているので説明します。 npm
まず第一に、Parcel.js をグローバルにインストールする必要があります // 現在のバージョンは 1.3.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 sack,パッケージはどうですか？なぜまだこれほど多くのファイルがあるのでしょうか?
心配しないでください。このページには package.json さえありません。次に、これをモジュール型プロジェクトに変換すると、パッケージ化の効果がわかります。最初に手動で開きます。index.html 効果を見てください...待ってください...CSS が読み込まれていないのはなぜですか?
これは、パッケージ化されたパスがすべて絶対パスであるため、ローカルで開く必要がある場合は、手動で相対パスに変更する必要があります。
2. モジュール型プロジェクトでのアプリケーション。
まず、上記のプロジェクトをモジュラープロジェクトに変換します
npm init -y コマンドを使用してデフォルトの package.json を作成し、起動コマンドとパッケージ化コマンドを変更します
npm run dev を通じて直接開始され、npm run build によってパッケージ化が実行されます
実際には、プロジェクトに依存関係を追加することをお勧めします
npm install parcel-bundler -S
上記は、CSS を使用した従来のページです。リンクで紹介
モジュラープロジェクトに変換するため、main.jsを1つだけ導入する必要があり、その後、他のcssファイルとjsファイルをmain.jsに導入する必要があります
そのため、次のようなES6構文を使用する必要がありますインポートして、babel をインストールします
npm install babel-preset-env -S
次に、ルート ディレクトリに .babelrc ファイルを作成し、次の構成を追加します:
{
"presets": ["env"]
} autoprefixer などの別の CSS 変換ツールをインストールします
npm install postcss-modules autoprefixer -S
.postcssrc ファイルを作成します:
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}
公式ドキュメントではHTMLリソースをコンパイルするためのプラグインPostHTMLも推奨していますが、ここでは当面必要ありません
自分でコードを変換し、最後にnpm run buildパッケージ化します
jsとcssが統合されているのがわかりますが、それらのコンテンツは、babel と autoprefixer によってコンパイルされています
3. Vue プロジェクトで Parcel を使用する
公式ドキュメントには、React プロジェクトに適したレシピが記載されています
しかし、私がよく使うのは、長い間研究した結果、vue です。ついにその方法を見つけました
まだindex.htmlを入り口として使用し、スクリプトでmain.jsを導入しています:
<!-- index.html -->
<body>
<p id="app"></p>
<script src="./src/main.js"></script>
</body>
// main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
router,
render: h => h(App)
})
ここで、私は、parcelとvueを正常に使用できる非常に強力なプラグインparcel-plugin-vueをお勧めしたいと思います協力してください
前述の babel と autoprefixer を組み合わせると、最終的な package.json は次のようになります:
{
"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"
}
}
必ずルート ディレクトリに .postcssrc ファイルと .babelrc ファイルを作成することを忘れないでください
その後、npm install して依存関係をインストールします。 npm run dev はプロジェクトを開始し、npm run build はプロジェクトをパッケージ化します。
関連する推奨事項:
以上がParcel.js および Vue 2.x の非常に高速なゼロ構成パッケージング エクスペリエンスの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。