首頁 > 文章 > web前端 > Parcel.js+Vue 2.x快速配置打包的方法

Parcel.js+Vue 2.x快速配置打包的方法

php中世界最好的语言原創: 2018-04-13 16:01:181287瀏覽

這次帶給大家Parcel.js Vue 2.x快速配置打包的方法，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 包裝

可以看到 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)
})

这里要推荐一个很厉害的插件 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 打包项目

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Parcel.js+Vue 2.x快速配置打包的方法

相關文章