详解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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
简单实现node.js图片上传
Dec 18 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python中单、双下划线的区别总结
2017/12/01 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
美容院经理岗位职责
2014/04/03 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
老人与海读书笔记
2015/06/26 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技