腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Parcel.js + Vue 2.x 極速零配置打包體驗(yàn)教程

更新時(shí)間：2017年12月24日 14:29:29 作者：WiseWrong

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

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

Parcel.js 的官網(wǎng)有這樣的自我介紹 “極速零配置Web應(yīng)用打包工具”

簡(jiǎn)單接觸了一下，單從效率上來(lái)說(shuō)，確實(shí)要比 webpack 強(qiáng)上不少，可坑也挺多，未來(lái)升級(jí)之后應(yīng)該會(huì)逐漸普及

官方文檔：https://parceljs.org/getting_started.html

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

一、基本用法

Parcel 可以用 npm 或 yarn 安裝，個(gè)人習(xí)慣用 npm，這篇博客將基于 npm 講解

首先需要全局安裝 Parcel.js // 當(dāng)前版本 1.3.0

npm install -g parcel-bundler

然后寫(xiě)一個(gè)配置文件...不對(duì)，這不是 webpack，這是 parcel，零配置打包

直接創(chuàng)建項(xiàng)目目錄，用寫(xiě)個(gè)一個(gè)簡(jiǎn)單的傳統(tǒng)頁(yè)面

然后在項(xiàng)目根目錄打開(kāi)命令行工具，輸入以下命令

parcel index.html -p 3030

然后在瀏覽器中打開(kāi) http://localhost:3030/ 就能打開(kāi)剛才開(kāi)發(fā)的頁(yè)面

上面的命令中 -p 用于設(shè)置端口號(hào)，如果不設(shè)置，則默認(rèn)啟動(dòng) 1234 端口

parcel 支持熱更新，會(huì)監(jiān)聽(tīng) html、css、js 的改變并即時(shí)渲染

// 實(shí)際上通過(guò) src 引入的 css、js 無(wú)法熱更新

開(kāi)發(fā)完成后，輸入以下命令進(jìn)行打包

parcel build index.html

打包后會(huì)生成 dist 目錄

橋豆麻袋，說(shuō)好的打包呢？怎么還是這么多文件？

騷年莫急，這是用傳統(tǒng)寫(xiě)法寫(xiě)的頁(yè)面，連 package.json 都沒(méi)有，接下來(lái)改造成模塊化的項(xiàng)目，就能看到打包的效果了

好吧，那我先手動(dòng)打開(kāi) index.html 看看效果...等等...為啥 css 沒(méi)被加載？

這是因?yàn)榇虬蟮穆窂蕉际墙^對(duì)路徑，放在服務(wù)器上沒(méi)問(wèn)題，如果需要本地打開(kāi)，就得手動(dòng)修改為相對(duì)路徑

二、應(yīng)用在模塊化項(xiàng)目中

正片開(kāi)始，首先將上面的項(xiàng)目改造成模塊化項(xiàng)目

通過(guò) npm init -y 命令創(chuàng)建一個(gè)默認(rèn)的 package.json，并修改啟動(dòng)和打包命令

這樣就可以直接通過(guò) npm run dev 啟動(dòng)項(xiàng)目，npm run build 執(zhí)行打包了

之前是全局安裝的 parcel，實(shí)戰(zhàn)中更推薦在項(xiàng)目中添加依賴(lài)

npm install parcel-bundler -S

上面是一個(gè)傳統(tǒng)頁(yè)面，使用 link 引入的 css

既然要改造為模塊化項(xiàng)目，那就只需要引入一個(gè) main.js，然后在 main.js 中引入其他的 css 和 js 文件

所以需要用到 import 等 ES6 語(yǔ)法，那就安裝一個(gè) babel 吧

npm install babel-preset-env -S

然后在根目錄創(chuàng)建一個(gè) .babelrc 文件，添加以下配置：

{
 "presets": ["env"]
}

再安裝一個(gè) css 轉(zhuǎn)換工具，比如 autoprefixer

npm install postcss-modules autoprefixer -S

創(chuàng)建 .postcssrc 文件：

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

官方文檔還推薦了一款編譯 html 資源的插件 PostHTML，不過(guò)這里暫時(shí)不需要

自行改造代碼，最后 npm run build 打包

可以看到 js 和 css 已經(jīng)整合，其內(nèi)容也經(jīng)過(guò)了 babel 和 autoprefixer 的編譯

三、在 Vue 項(xiàng)目中使用 Parcel

官方文檔給出了適用于 react 項(xiàng)目的配方

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

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

<!-- index.html -->
<body>
 <div id="app"></div>
 <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)
})

這里要推薦一個(gè)很厲害的插件 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"
 }
}

一定記得在根目錄創(chuàng)建 .postcssrc 和 .babelrc 文件

然后 npm install 安裝依賴(lài)， npm run dev 啟動(dòng)項(xiàng)目，npm run build 打包項(xiàng)目

總結(jié)

以上所述是小編給大家介紹的Parcel.js + Vue 2.x 極速零配置打包體驗(yàn)教程，希望對(duì)大家有所幫助，如果大家有所幫助。

您可能感興趣的文章: