Parcel-vue 初体验

Parcel 是什么

和webpack一样，parcel也是模块打包器的一种。不过不同于webpack的是，webpack需要做不少配置项，而parcel不需要任何的配置就可以使用。

安装 parcel

使用Yarn进行安装

yarn global add parcel-bundler

使用 parcel 构建 vue 项目

mkdir parcel_vue_demo
# 初始化package.json
cd parcel_vue_demo & yarn init -y

# 安装parcel-bundler和vue到本地
yarn add vue
yarn add parcel-bundler -D

在根目录新建一个index.html，然后在package.json中添加script脚本：

"scripts": {
  "dev": "parcel index.html -p 8089"
}

提示

parcel index.html 表示开启一个本地服务

-p <port_number> 本地服务的端口号

然后我们在建立一个src的目录，用来开发 vue 的项目，具体项目目录结构如下：

parcel_vue_demo
├── src               # vue项目目录
├── index.html        # 模板入口文件
├── package.json
├── node_modules
├── yarn.lock

我们在src目录中新建一个App.vue和main.js文件：

<!-- App.vue --> 
<template>
  <div>{{msg}}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'i am parcel demo'
    }
  }
}
</script>

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

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

然后我们在入口文件index.html中引入main.js：

<!DOCTYPE html>
<html lang="en">

<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_demo</title>
</head>

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

</html>

然后我们输入命令yarn dev即可在浏览器上预览效果：

提示

parcel这里有一点感觉还不错，如果yarn dev运行后，发现项目缺少某些依赖，parcel则会自动安装上这些依赖。

这样，利用 parcel 构建的一个简单的 vue 项目就完成了。

使用 css 预处理器

使用预处理器其实和在webpack中一样，只是我们少了配置loader的步骤。

以stylus为例，先安装stylus：

yarn add stylus stylus-loader -D

然后就可以直接使用了：

<template>
  <div>
    <!-- 省略结构 -->
  </div>
</template>

<style lang="stylus">
  div
    font-size 24px
</style>

安装 postcss

如果要添加浏览器前缀，也就是autoprefixer，则需要配置.postcssrc.js

首先安装postcss-modules和autoprefixer：

yarn add postcss-modules autoprefixer -D

然后配置.postcsser.js文件：

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

然后在package.json中配置browserslist：

// package.json
{
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

配置 babel

如果要使用babel的话，安装对应的插件即可：

yarn add babel-preset-env babel-preset-stage-2 -D

然后配置.babelrc文件：

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    "stage-2"
  ]
}

打包

在package.json中添加script：

"scripts": {
  "build": "parcel build index.html"
}

运行yarn build命令后，会在目录生成dist目录，里面存放的就是打包后的项目。

提示

其实项目一开始启动本地服务构建的时候，就会在根目录build一次编译后的项目文件。

总结

parcel虽然在项目中可以做到零配置使用，但是还是存在着许多不足，比如打包后的文件都存在dist目录中，不会有对应的资源目录存在，比如images、js等存放对应资源的文件夹。其次就是parcel打包出来的资源包过大，比起webpack来说，还不够全面，比如在项目中只用到了某个库的一个方法，那么打包的话，parcel会将这整个库都给打包进去，从而增大了包的体积。

如果有不对的地方还希望指出~

# Parcel-vue 初体验

# Parcel 是什么

# 安装 parcel

# 使用 parcel 构建 vue 项目

# 使用 css 预处理器

# 安装 postcss

# 配置 babel

# 打包

# 总结