详解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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
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 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
javascript去掉前后空格的实例
2013/11/07 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python根据出生日期获得年龄的方法
2015/03/31 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python 自定义对象的打印方法
2019/01/12 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python FTP编程基础入门
2021/02/27 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
八年级数学教学反思
2014/01/31 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年司机工作总结
2014/11/21 职场文书
公司会议开幕词
2016/03/03 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电