實戰Parcel構建一個基於Vue.js的相簿應用

Dunizb發表於2018-05-09

前段時間發了一篇《前端構建工具發展及其比較》，回顧了前端構建工具的發展歷程和進化，其中最新出來的零配置打包工具Parcel我一直很好奇，它到底怎麼零配置了？眾所周知此前 Webpack 的配置簡有點讓人茫然和無措，雖然現在 Webpack 4 也號稱零配置，但也是相對的，依然需要配置一些東西，而我使用了 Parcel 後我有點驚訝，這貨居然連個配置檔案也不需要。不像 Webpack 需要一個webpack.config.js這樣的檔案，Parcel真正是不需要配置，不需要指定什麼入口、出口、外掛配置之類的，看起來這貨真的是個零配置工具。

例項介紹

Parcel有個中文網站：parceljs.org/，非常簡潔，文件也比較清晰，但感覺也有點簡陋吧，不然就不會那麼簡潔了。具體就不多說了，看一看官網就知道了。

我以這兩天做的一個人相簿應用為例子，這是一個Parcel結合Vue.js+VueRouter實現的一個簡單應用，主要功能是展示相簿列表，讓後點選某個相簿進入照片瀑布流佈局頁面，展示該相簿下的所有照片。全部原始碼戳這裡

對著官網文件搭建環境到跑起來，硬是花了我幾個小時消化，試錯，搜尋等。下面是相簿應用的整體目錄：

這個目錄結構大家做過Vue.js專案的應該很清楚吧，就把一一介紹是什麼了。

開始

安裝依賴

首先在你正在使用的專案目錄下建立一個 package.json 檔案，然後安裝npm install parcel-bundler --save這個包，這是使用Parcel必須的，注意使用 Vue 需要安裝parcel-plugin-vue，而不是直接安裝vue，parcel-bundler是主要的工具，對於vue結尾的單檔案，需要單獨處理檔案型別。使用vue-router安裝vue-router，如果你需要使用 Less 或 Sass 安裝相應包即可，這裡我使用 Sass 安裝node-sass。

配置babel，postcss

新增postcss.config.js檔案：

module.exports = {
    plugins: [
      require('autoprefixer')({ 
        browsers: [
          'last 20 versions',
          'IE 9',
          'iOS >= 8'
        ]
      })
    ]
  }
複製程式碼

新增.babelrc檔案：

{
  "presets": [
    ["env"]
  ]
}
複製程式碼

新建html

在根目錄新增 index.html，只需有一個 #root 節點，然後引入./src/index.js即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <link href="//blog.dunizb.com/favicon.ico" rel="shotcut icon">
  <title>我的相簿</title>
</head>
<body>
  <div id="root"></div>
  <script src="./src/index.js"></script>
</body>
</html>
複製程式碼

新增指令碼

在 package.json 的 scripts 中新增dev和build兩個命令

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url /",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
複製程式碼

只需要執行npm run dev 和 npm run build 就可以進行開發和構建，public-url就相當於資源的引用路徑。

配置Vue和VueRouter

在 src 下的 index.js 中配置即可

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router.js'
import App from './app.vue'
import './assets/styles/global.css'
Vue.use(VueRouter)
const router = createRouter()
new Vue({
  el: '#root',
  router,
  render: (h) => h(App)
});
複製程式碼

config 目錄下是 Router 的配置

router.js，這是 router 的主檔案

import Router from 'vue-router'
import routes from './routers.js'
export default () => {
  return new Router({
    routes
  })
}
複製程式碼

routers.js，這是具體路由的配置

import Index from '../views/index.vue'
import List from '../views/list.vue'
export default [
  {
    path: '/',
    component: Index,
  },
  {
    path: '/list/:id',
    props: true,
    component: List,
  }
]
複製程式碼