详解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 相关文章推荐
js获取div高度的代码
Aug 09 Javascript
javascript显示选择目录对话框的代码
Nov 10 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
在react中使用vue的状态管理的方法示例
May 02 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
解析php5配置使用pdo
2013/07/03 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
javascript json字符串到json对象转义问题
2019/01/22 Javascript
vue--vuex详解
2019/04/15 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
质检员岗位职责
2013/12/17 职场文书
顶撞领导检讨书
2014/01/29 职场文书
最新离婚协议书范本
2014/08/19 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
成事在人观后感
2015/06/16 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫