详解Vue快速零配置的打包工具——parcel


Posted in Javascript onJanuary 16, 2018

本文介绍了Vue快速零配置的打包工具——parcel,分享给大家,具体如下:

特性

  1. 快速打包
  2. 打包所有资源
  3. 自动转换
  4. 代码拆分
  5. 模块热替换
  6. 友好的错误记录

如何工作

Parcel 将 资源 树转换成 包(bundles) 树。许多其它的打包工具基本上是基于 JavaScript 资源,还有附加在其上的其它格式的资源。例如,在 JS 文件中内联成字符串。 Parcel是对文件类型无感知的,它能按你所期待的方式那样与任意类型的资源工作,且毋须配置。

构建资源树

Parcel 接受单个入口资源作为输入,可以是任意类型:JS、HTML、CSS、图片文件等等。在 Parcel 中定义了许多不同的资源类型,它知道如何去处理特定的文件类型。资源会被解析,资源的依赖会被提取,资源会被转换成最终编译好的形态。此过程创建了一个资源树。

构建文件束树

一旦资源树被构建好,资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束,然后动态的 import() 会被创建成子文件束 ,这引发了代码的拆分。当不同类型的文件资源被引入,兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件,那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。如果资源被多于一个文件束引用,它会被提升到文件束树中最近的公共祖先中,这样该资源就不会被多次打包。

打包

在文件束树被构建之后,每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来,生成到最终被浏览器加载的文件中。

配置

初始化项目

npm install -g parcel
 mkdir xxx && cd xxx && npm init -y

转换

Babel

npm install babel-preset-env --save-dev

根目录配置.babelrc

{
  "presets": ["env"]
 }

PostCSS

npm install postcss-modules autoprefixer --save-dev

根目录配置.postcssrc

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

支持vue

npm install parcel-plugin-vue --save-dev

添加entry

import App from './App.vue'
 import router from './router/index.js'
 import './assets/js/rem.js'
 window.onload = () => {
  const vm = new Vue({
   el: '#app',
   router,
   render: h => h(App)
  })
 }

配置index.html

<body>
  <div id="app"></div>
  <script src="入口文件"></script>
 </body>

配置路由(代码拆分--懒加载)

{
   path: 'home',
   component: () =>import('../pages/home.vue')
 }

import()返回的是一个promise,所以也可以用 async/await 语法,当你想在本地使用 async/await 语法,请引入 babel-polyfill

区分生产环境和开发环境,配置package.json.

dev --- 开发环境

build --- 生产环境

"scripts": {
   "dev": "parcel index.html -p 3700",
   "build": "parcel build index.html"
  }

大功告成

访问http://localhost:3700/home

详解Vue快速零配置的打包工具——parcel

此demo是vue + parcel + grid +stylus完成 : parcel-vue

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
jquery实现轮播图特效
Apr 12 jQuery
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue watch自动检测数据变化实时渲染的方法
Jan 16 #Javascript
动态加载权限管理模块中的Vue组件
Jan 16 #Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 #Javascript
解析Angular 2+ 样式绑定方式
Jan 15 #Javascript
基于jquery的on和click的区别详解
Jan 15 #jQuery
仿淘宝JSsearch搜索下拉深度用法
Jan 15 #Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python中的decimal类型转换实例详解
2019/06/26 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Django model update的多种用法介绍
2020/03/28 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python标识符命名规范原理解析
2020/01/10 Python
Python调用C语言程序方法解析
2020/07/07 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
婚假请假条怎么写
2014/04/10 职场文书
班级旅游计划书
2014/05/03 职场文书
道德之星事迹材料
2014/05/03 职场文书
机器人瓦力观后感
2015/06/12 职场文书
食品卫生管理制度
2015/08/06 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS