使用 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),
});<!-- public/index.html --> <!-- 引入 main.js --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>parcel-vue</title> </head> <body> <div id="app"></div> <script src="../src/main.js"></script> </body> </html>
由于我是局部安装 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 项目几乎就是零配置，非常方便。