无需Plugin，Parcel 零配置打包 Vue 2.x

小咪咪 2022-05-19 03:09 225阅读 0赞

> **小编推荐**：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

继 Browserify、Webpack 之后，又一款打包工具 Parcel 横空出世

Parcel.js 的官网有这样的自我介绍 “**极速零配置**Web应用打包工具”

简单接触了一下，单从效率上来说，确实要比 webpack 强上不少，可坑也挺多，未来升级之后应该会逐渐普及

官方文档：[https://parceljs.org/getting\_started.html][https_parceljs.org_getting_started.html]

官方 GitHub：[https://github.com/parcel-bundler/parcel][https_github.com_parcel-bundler_parcel]

**一、基本用法**

Parcel 可以用 npm 或 yarn 安装，个人习惯用 npm，这篇博客将基于 npm 讲解

首先需要全局安装 Parcel.js    // 当前版本 1.3.0

npm install -g parcel-bundler

然后写一个配置文件...不对，这不是 webpack，这是 parcel， 零配置打包

直接创建项目目录，用写个一个简单的**传统页面**

![70][]

然后在项目根目录打开命令行工具，输入以下命令

parcel index.html -p 3030

![70 1][]

然后在浏览器中打开 http://localhost:3030/ 就能打开刚才开发的页面

**上面的命令中 -p 用于设置端口号，如果不设置，则默认启动 1234 端口**

parcel 支持热更新，会监听 html、css、js 的改变并即时渲染

// 实际上通过 src 引入的 css、js 无法热更新

开发完成后，输入以下命令进行打包

parcel build index.html

打包后会生成 dist 目录

![70 2][]

桥豆麻袋，说好的打包呢？怎么还是这么多文件？

骚年莫急，这是用传统写法写的页面，连 package.json 都没有，接下来改造成模块化的项目，就能看到打包的效果了

好吧，那我先手动打开 index.html 看看效果...等等...为啥 css 没被加载？

这是因为打包后的路径都是绝对路径，放在服务器上没问题，如果需要本地打开，就得手动修改为相对路径

**二、应用在模块化项目中**

正片开始，首先将上面的项目改造成模块化项目

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

![70 3][]

这样就可以直接通过 npm run dev 启动项目，npm run build 执行打包了

之前是全局安装的 parcel，实战中更推荐在项目中添加依赖

npm install parcel-bundler -S

上面是一个传统页面，使用 link 引入的 css

既然要改造为模块化项目，那就只需要引入一个 main.js，然后在 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** 文件：

![复制代码][copycode.gif]

{
      "modules": true,
      "plugins": {
        "autoprefixer": {
          "grid": true
        }
      }
    }

![复制代码][copycode.gif]

官方文档还推荐了一款编译 html 资源的插件 PostHTML，不过这里暂时不需要

自行改造代码，最后** npm run build** 打包

![1059788-20171223110723787-396659339.png][]

可以看到 js 和 css 已经整合，其内容也经过了 babel 和 autoprefixer 的编译

**三、在 Vue 项目中使用 Parcel**

官方文档给出了适用于 react 项目的[**配方**][Link 1]

但我常用的是 vue，研究了好久，终于找到了方法

![1059788-20171224130535646-1152456762.png][]

**依旧使用 index.html 作为入口，以 script 引入 main.js**：

<body>
      <div id="app"></div>
      <script src="./src/main.js"></script>
    </body>

![复制代码][copycode.gif]

// 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)
    })

![复制代码][copycode.gif]

这里要推荐一个很厉害的插件 **parcel-plugin-vue**，它让 parcel 和 vue 成功牵手

再加上之前提到的 babel、autoprefixer，最后的 **package.json** 是这样的：

![复制代码][copycode.gif]

{
      "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"
      }
    }

![复制代码][copycode.gif]

一定记得在根目录创建 **.postcssrc** 和 **.babelrc** 文件  
然后 npm install 安装依赖， npm run dev 启动项目，npm run build 打包项目

原文链接：[http://www.cnblogs.com/wisewrong/p/8086239.html][http_www.cnblogs.com_wisewrong_p_8086239.html]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

[Fundebug]: https://www.fundebug.com/
[https_parceljs.org_getting_started.html]: https://parceljs.org/getting_started.html
[https_github.com_parcel-bundler_parcel]: https://github.com/parcel-bundler/parcel
[70]: /images/20220519/2e8029cb6b8746cb9e028f884e4a1eb4.png
[70 1]: /images/20220519/df58b7368380440d93afc40e97205f52.png
[70 2]: /images/20220519/7d9d7beab1874a79a00f1c51a3ce5477.png
[70 3]: /images/20220519/c1aef90f916748e08d009ce7ecc6a332.png
[copycode.gif]: /images/20220519/18bda31f78bd4a238cbf31e91d88f1c0.png
[1059788-20171223110723787-396659339.png]: /images/20220519/d1725372959d4c8a8b99bb6619eccfb5.png
[Link 1]: https://parceljs.org/recipes.html
[1059788-20171224130535646-1152456762.png]: /images/20220519/a7cd056255fe4507915a33a8875e0ca4.png
[http_www.cnblogs.com_wisewrong_p_8086239.html]: http://www.cnblogs.com/wisewrong/p/8086239.html
[1386816-20180502112633892-1858746955.png]: /images/20220519/20773d514e604055afda9b9833036d72.png