Parcel + Vue 2.x 极速零配置打包体验

时间 2019-11-21

标签 parcel vue 2.x 配置打包体验繁體版

原文原文链接

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

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

简单接触了一下，单从效率上来讲，确实要比 webpack 强上很多，可坑也挺多，将来升级以后应该会逐渐普及vue

官方文档：https://parceljs.org/getting_started.htmlreact

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

1、基本用法git

Parcel 能够用 npm 或 yarn 安装，我的习惯用 npm，这篇博客将基于 npm 讲解github

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

npm install -g parcel-bundler

而后写一个配置文件...不对，这不是 webpack，这是 parcel，零配置打包
vue-router

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

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

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

这是由于打包后的路径都是绝对路径，放在服务器上没问题，若是须要本地打开，就得手动修改成相对路径

2、应用在模块化项目中

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

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

这样就能够直接经过 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 文件：

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

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

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

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

3、在 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 打包项目