Parcel.js+Vue 2.x クイック構成パッケージ化方法-jsチュートリアル-php.cn

Parcel.js+Vue 2.x クイック構成パッケージ化方法

php中世界最好的语言

リリース： 2018-04-13 16:01:18

オリジナル

1304 人が閲覧しました

今回は、Parcel.js+Vue 2.x のクイック設定とパッケージ化の方法をお届けします。見てみましょう。

BrowserifyとWebpackの後、別のパッケージングツールParcelが誕生しました

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

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

。公式ドキュメント:

https://

parceljs.org/getting_started.html 公式 GitHub: https://github.com/parcel-bundler/parcel

1.基本的な使い方 Parcelはnpmまたはyarnを使用してインストールできます。個人的には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の袋、約束の梱包はどうですか？なぜまだこれほど多くのファイルがあるのでしょうか?

心配しないでください。これは、package.json さえも含まれていないページです。次に、

モジュール

プロジェクトに変換され、パッケージ化効果が確認できます。さて、効果を確認するためにまず手動でindex.htmlを開いてみましょう...ちょっと待ってください...CSSが読み込まれていないのはなぜですか?

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

。

2. モジュール型プロジェクトでのアプリケーションメインのフィルムから始めましょう。まず上記のプロジェクトをモジュール式プロジェクトに変換します

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

npm init -y このようにして、npm run dev ,

梱包完了

npm run dev 启动项目，npm run build 以前は、パーセルはグローバルにインストールされていましたが、実際には、プロジェクトに依存関係を追加することをお勧めします

npm install parcel-bundler -S

ログイン後にコピー

。上記はリンクで紹介したCSSを使用した従来のページです

モジュラープロジェクトに変換したいので、main.js を導入するだけで済み、その後 main.js に他の css ファイルと js ファイルを導入するだけです

したがって、インポートなどの ES6 構文を使用してから、babel

npm install babel-preset-env -S

ログイン後にコピー

をインストールする必要があります次に、ルートディレクトリに .babelrc ファイルを作成し、次の構成を追加します:

{
 "presets": ["env"]
}

ログイン後にコピー

autoprefixer

npm install postcss-modules autoprefixer -S

ログイン後にコピー

などの別のCSS変換ツールをインストールします .postcssrc ファイルを作成します:

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

ログイン後にコピー

公式ドキュメントではHTMLリソースをコンパイルするためのプラグインPostHTMLも推奨していますが、ここでは当面必要ありません

コードを自分で変更して、最後に

パッケージ

npm run build jsとcssが統合され、その内容がbabelとautoprefixerでコンパイルされていることがわかります

3. Vue プロジェクトで Parcel を使用する公式ドキュメントには、反応プロジェクトに適したレシピが記載されています

但我常用的是 vue，研究了好久，终于找到了方法

依旧使用 index.html 作为入口，以 script 引入 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-plugin-vue，它让 parcel 和 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 打包项目

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！