Parcel + Vue 尝鲜

2018年1月24日 · 阅读需 3 分钟

Webpack 久负盛名，包罗万象。若是用其造轮子的话，难免修修补补。年前兴起了Parcel打包工具，号称“极速零配置”，让人不胜向往。这不得空了，就来尝尝鲜，记录下如何使用 Parcel + Vue进行开发。

预备

两个依赖

parcel-bundler(戳我👇) 这是 Parcel 打包工具，“极速零配置”的起源。
parcel-plugin-vue(戳我👇) 这是一个 parcel 插件，使 pacel 支持 .vue 文件。

项目结构

parcel-vue
├── package.json
├── .babelrc
├── index.html
├──src
   ├── App.vue
   ├── main.js

这是基本的项目结构。

开始

安装parcel相关开发依赖

yarn add parcel-bundler parcel-plugin-vue babel-preset-env -D

安装vue
```
yarn add vue
```

添加入口文件 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>parcel + vue</title>
</head>
<body>
  <div id="app"></div>
  <script src="./src/main.js"></script>
</body>
</html>

添加脚本内容 main.js 和 vue组件 App.vue

// ./src/main.js
import Vue from 'vue'
import App from './App'

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

// App.vue
<template>
  <h1>parcel vue</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

配置 .babelrc
```
{
  "presets": [
    "env"
  ]
}
```

大功告成！！！

额，再加条启动脚本吧！

// package.json
{
  ...,
  "scripts": {
    "start": "parcel index.html"
  },
  ...
}

Node执行:

yarn start

好了，浏览器打开http://localhost:1234看看吧。

生产环境

构建生产环境，只需要执行：

parcel build index.html --public-url ./

这里以index.html为入口，parcel会自动识别和提取相关依赖资源，并在根目录下创建 dist 文件夹。这里 dist 名称是默认的，可以按意愿更改。可以通过命令 parcel build -h 查看具体的参数列表。

查看示例代码。

预备​

两个依赖​

项目结构​

开始​

生产环境​

预备

两个依赖

项目结构

开始

生产环境