無需Plugin,Parcel 零配置打包 Vue 2.x
小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。
繼 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 打包
可以看到 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" } }
一定記得在根目錄建立 .postcssrc 和 .babelrc 檔案
然後 npm install 安裝依賴, npm run dev 啟動專案,npm run build 打包專案
原文連結:http://www.cnblogs.com/wisewrong/p/8086239.html
Fundebug提供JavaScript監控,支援所有主流前端框架,微信小程式監控,微信小遊戲監控,後端Node.js監控。