Parcel.js 结合 Vue 2.x 的零配置打包实战指南

Parcel.js 简介与基本用法

继 Browserify 和 Webpack 之后，Parcel 作为新一代打包工具应运而生。

Parcel.js 官网将其定义为“极速零配置Web应用打包工具”。

初步体验发现，其运行效率显著优于 Webpack，尽管目前仍存在不少坑，但随着版本迭代，预计未来将逐渐普及。

官方文档地址：https://parceljs.org/getting_started.html

官方 GitHub 仓库：https://github.com/parcel-bundler/parcel

一、基本用法

Parcel 支持通过 npm 或 yarn 安装，本文以 npm 为例进行讲解。

首先需全局安装 Parcel.js（当前版本为 1.3.0）。

npm install -g parcel-bundler

接着无需编写配置文件，这正是 Parcel 与 Webpack 的区别所在，它主打零配置打包。

直接创建项目目录，并编写一个简单的传统 HTML 页面。

在项目根目录打开命令行工具，执行以下命令。

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 没有被加载？

这是因为打包后的资源路径默认为绝对路径，部署到服务器没有问题，但若需本地直接打开，则需手动修改为相对路径。

模块化项目中的 Parcel 配置

二、应用在模块化项目中

进入正题，首先将上述项目改造为模块化项目结构。

通过 npm init -y 命令创建一个默认的 package.json 文件，并修改启动和打包命令。

这样即可直接通过 npm run dev 启动项目，并使用 npm run build 执行打包。

虽然之前是全局安装 parcel，但在实战项目中更推荐将依赖添加到项目本地。

npm install parcel-bundler -S

上述示例是一个传统页面，使用 link 标签引入 css。

既然要改造为模块化项目，只需引入一个 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 集成

三、在 Vue 项目中使用 Parcel

官方文档提供了适用于 React 项目的配置方案。

但我常用的是 Vue，经过研究找到了适配方法。

依然使用 index.html 作为入口，通过 script 标签引入 main.js：

<!-- index.html -->
<body>
 <div id="app"></div>
 <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 打包项目。

总结

以上介绍了 Parcel.js 结合 Vue 2.x 的极速零配置打包体验，希望对大家有所帮助。