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， 零配置打包
直接創(chuàng)建項目目錄，用寫個一個簡單的傳統(tǒng)頁面
然后在項目根目錄打開命令行工具，輸入以下命令
parcel index.html -p 3030
然后在瀏覽器中打開 http://localhost:3030/ 就能打開剛才開發(fā)的頁面
上面的命令中 -p 用于設置端口號，如果不設置，則默認啟動 1234 端口
parcel 支持熱更新，會監(jiān)聽 html、css、js 的改變并即時渲染
// 實際上通過 src 引入的 css、js 無法熱更新
開發(fā)完成后，輸入以下命令進行打包
parcel build index.html
打包后會生成 dist 目錄
橋豆麻袋，說好的打包呢？怎么還是這么多文件？
騷年莫急，這是用傳統(tǒng)寫法寫的頁面，連 package.json 都沒有，接下來改造成模塊化的項目，就能看到打包的效果了
好吧，那我先手動打開 index.html 看看效果...等等...為啥 css 沒被加載？
這是因為打包后的路徑都是絕對路徑，放在服務器上沒問題，如果需要本地打開，就得手動修改為相對路徑
二、應用在模塊化項目中
正片開始，首先將上面的項目改造成模塊化項目
通過 npm init -y 命令創(chuàng)建一個默認的 package.json，并修改啟動和打包命令
這樣就可以直接通過 npm run dev 啟動項目，npm run build 執(zhí)行打包了
之前是全局安裝的 parcel，實戰(zhàn)中更推薦在項目中添加依賴
npm install parcel-bundler -S
上面是一個傳統(tǒng)頁面，使用 link 引入的 css
既然要改造為模塊化項目，那就只需要引入一個 main.js，然后在 main.js 中引入其他的 css 和 js 文件
所以需要用到 import 等 ES6 語法，那就安裝一個 babel 吧
npm install babel-preset-env -S
然后在根目錄創(chuàng)建一個 .babelrc 文件，添加以下配置：
{
"presets": ["env"]
}
再安裝一個 css 轉換工具，比如 autoprefixer
npm install postcss-modules autoprefixer -S
創(chuàng)建 .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>
<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)
})
這里要推薦一個很厲害的插件 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 安裝依賴， npm run dev 啟動項目，npm run build 打包項目
總結
以上所述是小編給大家介紹的Parcel.js + Vue 2.x 極速零配置打包體驗教程，希望對大家有所幫助，如果大家有所幫助。
相關文章
這篇文章主要為大家詳細介紹了JavaScript prototype屬性,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS實現(xiàn)超精簡響應鼠標顯示二級菜單代碼,可實現(xiàn)針對鼠標事件的響應動態(tài)修改頁面元素屬性的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式
本篇文章主要介紹了詳解用webpack的CommonsChunkPlugin提取公共代碼的3種方式，具有一定的參考價值，有興趣的可以了解一下2017-11-11
JS中LocalStorage與SessionStorage五種循序漸進的使用方法
這篇文章主要介紹了JS中LocalStorage與SessionStorage五種循序漸進的使用方法,需要的朋友可以參考下2017-07-07
JS使用對象的defineProperty進行變量監(jiān)控操作示例
這篇文章主要介紹了JS使用對象的defineProperty進行變量監(jiān)控操作,結合實例形式分析了對象defineProperty方法的功能及簡單使用技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了JavaScript實現(xiàn)時間倒計時跳轉(推薦)的相關資料,涉及到settimeout和setinterval方法的介紹，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
html5+canvas實現(xiàn)支持觸屏的簽名插件教程
jq-signature.js是一個幫助你創(chuàng)建簽名的jQuery插件，允許你的用戶使用鼠標，手指或者鉛筆生成簽名。下面這篇文章主要給大家介紹了利用html5+canvas實現(xiàn)支持觸屏的簽名插件的相關資料，需要的朋友可以參考下。2017-05-05
復制到剪貼板的實現(xiàn)方法有很多，在本文將為大家詳細介紹下使用js是如何實現(xiàn)的，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了JS獲取文件大小的方法,結合實例總結分析了JavaScript獲取文件大小的常用技巧,并給出了判斷文件格式與大小的完整實例供讀者參考,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jsMind通過鼠標拖拽的方式調整節(jié)點位置的方法，十分的簡單實用，推薦給有需要的小伙伴參考下。2015-04-04