使用 Parcel 构建 Vue.js 项目

Parcel 是一款 Web 应用打包工具，与 Webpack 相比，最大的特点就是极速零配置。

因为使用 npm 会出现莫名其妙的安装失败问题，所以这里使用 yarn 管理依赖。

初始化项目

yarn init

安装依赖

yarn add parcel-bundler --dev
yarn add vue vue-router

项目目录

与 Vue CLI 3 构建的目录大致相同。

├── public
│   └── index.html               
├── src                                 
│   ├── components
│   │    ├── componentA.vue
│   │    └── componentB.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── package.json 

// main.js

import Vue from 'vue';
import App from './App.vue';

import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

由于我是局部安装 Parcel，所以要执行 parcel 命令需要在 package.json 添加执行脚本。

{
  "name": "parcel-vue",
  "version": "1.0.0",
  "main": "public/index.html",
  "scripts": {
    "dev": "parcel public/index.html",
    "build": "rm -rf dist && parcel build public/index.html --public-url ./"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^2.6.0",
    "parcel-bundler": "^1.12.1",
    "vue-template-compiler": "^2.6.8"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vue-hot-reload-api": "^2.3.3",
    "vue-router": "^3.0.2"
  }
}

执行构建

启动开发服务器：

yarn run dev

项目打包构建：

yarn run build

最后

Parcel 从 v1.7.0 开始添加对 .vue 文件的支持，所以现在构建 Vue.js 项目几乎就是零配置，非常方便。