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.vuemain.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-modulesautoprefixer

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目录中,不会有对应的资源目录存在,比如imagesjs等存放对应资源的文件夹。其次就是parcel打包出来的资源包过大,比起webpack来说,还不够全面,比如在项目中只用到了某个库的一个方法,那么打包的话,parcel会将这整个库都给打包进去,从而增大了包的体积。

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

上次更新: 8/31/2018, 5:52:20 PM