实战Parcel构建一个基于Vue.js的相册应用

时间 2019-12-06

标签实战 parcel 构建一个基于 vue.js vue 相册应用栏目 JavaScript 繁體版

原文原文链接

前段时间发了一篇《前端构建工具发展及其比较》，回顾了前端构建工具的发展历程和进化，其中最新出来的零配置打包工具Parcel我一直很好奇，它到底怎么零配置了？众所周知此前 Webpack 的配置简有点让人茫然和无措，虽然如今 Webpack 4 也号称零配置，但也是相对的，依然须要配置一些东西，而我使用了 Parcel 后我有点惊讶，这货竟然连个配置文件也不须要。不像 Webpack 须要一个webpack.config.js这样的文件，Parcel真正是不须要配置，不须要指定什么入口、出口、插件配置之类的，看起来这货真的是个零配置工具。css

实例介绍

Parcel有个中文网站：https://parceljs.org/，很是简洁，文档也比较清晰，但感受也有点简陋吧，否则就不会那么简洁了。具体就很少说了，看一看官网就知道了。html

我以这两天作的一我的相册应用为例子，这是一个Parcel结合Vue.js+VueRouter实现的一个简单应用，主要功能是展现相册列表，让后点击某个相册进入照片瀑布流布局页面，展现该相册下的全部照片。所有源码戳这里前端

对着官网文档搭建环境到跑起来，硬是花了我几个小时消化，试错，搜索等。下面是相册应用的总体目录：
vue

这个目录结构你们作过Vue.js项目的应该很清楚吧，就把一一介绍是什么了。node

开始

安装依赖

首先在你正在使用的项目目录下建立一个 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。webpack

配置babel，postcss

添加postcss.config.js文件：git

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

添加.babelrc文件：github

{
  "presets": [
    ["env"]
  ]
}

新建html

在根目录添加 index.html，只需有一个 #root 节点，而后引入./src/index.js便可。web

<!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两个命令vue-router

"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,
  }
]

到这里环境搭建就算完成了，写好vue页面后，就能够执行npm run dev了，Parcel会自动读取脚本里的配置进行打包，而后会在根目录生成一个dist文件夹，里面的代码就是打包后的文件了，而且自动作了压缩操做。

而且Parcel的输出也是很美观

后记

全程没有配置什么插件啊，转换器啊，对于vue文件咱们也只是安装了一个包而已，没有相似parcel.config.js这样的文件，是否是很酷？对于简单的项目是很好的选择。

为何说适合简单的项目？由于没有配置，意味着可控性不可控，人类对于不可控的东西是怀有很大的恐惧的，Webpack配置多了让人抓狂，Pacel了配置少了一样会让人抓狂，固然也许这个实例太简单还没用到什么高级的东西....

喜欢折腾我的项目的，还不快来试试？

源码

所有源码：https://github.com/dunizb/parceljs-vue-photo

本文首发于 https://www.dunizb.com
原文连接： https://blog.dunizb.com/2018/05/08/Parcel-Vue/