首頁  >  文章  >  web前端  >  在Parcel.js + Vue 2.x中如何做到極速零配置打包

在Parcel.js + Vue 2.x中如何做到極速零配置打包

亚连
亚连原創
2018-06-15 17:30:291618瀏覽

這篇文章主要介紹了Parcel.js Vue 2.x 極速零配置打包體驗的相關資料,需要的朋友可以參考下

繼Browserify、Webpack 之後,又一款打包工具Parcel 橫空出世

Parcel.js 的官網有這樣的自我介紹「極速零設定Web應用程式打包工具」

簡單接觸了一下,單從效率上來說,確實要比webpack 強上不少,可坑也蠻多,未來升級之後應該會逐漸普及

官方文件:https://parceljs.org/getting_started.html

官方GitHub:https://github .com/parcel-bundler/parcel

一、基本用法

Parcel 可以用npm 或yarn 安裝,個人習慣用npm,這篇部落格將基於npm 講解

首先需要全域安裝Parcel.js    // 目前版本1.3.0

npm install -g parcel-bundler

然後寫一個設定檔...不對,這不是webpack,這是parcel ,零配置打包

直接建立專案目錄,用寫個一個簡單的傳統頁面

然後在專案根目錄中開啟命令列工具,輸入以下命令

parcel index.html -p 3030

然後在瀏覽器中開啟http://localhost:3030/ 就能開啟剛才開發的頁面

上面的指令中-p 用於設定埠號,如果不設置,則預設啟動1234 埠

parcel 支援熱更新,會監聽html、css、js 的改變並即時渲染

#// 實際上透過src 引入的css、js 無法熱更新

開發完成後,輸入以下指令進行打包

parcel build index.html

打包後會產生dist 目錄

橋豆麻袋,說好的打包呢?怎麼還是這麼多文件?

騷年莫急,這是用傳統寫法寫的頁面,連package.json 都沒有,接下來改造成模組化的項目,就能看到打包的效果了

好吧,那我先手動打開index.html 看看效果...等等...為啥css 沒被載入?

這是因為打包後的路徑都是絕對路徑,放在伺服器上沒問題,如果需要本地打開,就得手動修改為相對路徑

二、應用在模組化專案中

正片開始,首先將上面的專案改造成模組化專案

透過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 包裝

可以看到j​​s 和css 已經整合,其內容也經過了babel 和autoprefixer 的編譯

#三、在Vue 專案中使用Parcel

官方文件給了適用於react 專案的配方

但我常用的是vue,研究了好久,終於找到了方法

依舊使用index.html 作為入口,以script 引入main .js:

<!-- 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)
})

這裡要推薦一個很厲害的插件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 打包項目

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Vue中設定背景圖片

如何解決vue打包後靜態資源圖片失效的問題

如何把vue-router和express專案部署到伺服器上去

#在Vue 2.5.2下使用axios express本地請求404的解決方法

使用vue和react來實作展開收起等效果

#在vue中如何實作webpack打包最佳化

詳細解說vue編碼風格

#

以上是在Parcel.js + Vue 2.x中如何做到極速零配置打包的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn