繼 Browserify、Webpack 之後，又一款打包工具 Parcel 橫空出世，Parcel.js 的官網有這樣的自我介紹 「極速零設定Web應用打包工具」。本文主要介紹了Parcel.js + Vue 2.x 極速零配置打包體驗 的相關資料,需要的朋友可以參考下，希望能幫助到大家。
簡單接觸了一下，單從效率上來說，確實要比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 打包
##可以看到js 和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 '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)
}){
"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"
}
}以上是Parcel.js和Vue 2.x 極速零組態打包體驗範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
