Parcel是个好玩意儿
今天学习了一下Parcel打包工具,确实感觉十分简单易上手,基本不需要配置,未来可能是一个主流的打包工具。相比较于Webpack来说,Parcel简直是毫无难度。接下来总结一下我的学习收获。
1 安装Parcel
npm i -g parcel-bundler
注意是parcel-bundler而不是parcel。
2 安装依赖并写代码
这一部分同之前的开发没有区别,可能相对于Vue-Cli、create-react-app等脚手架工具来说多了一个手动安装依赖的过程。
3 以开发环境运行程序
parcel name.html
或者:
parcel name.js
这时parcel会自动打包并且搭建本地开发环境服务器,结束之后可以看到打包所耗时间和本地服务器的地址。打开浏览器输入该地址,即可看到你的程序。
值得注意的是,这是一个热更新的本地服务器;一旦你更改了代码并且保存了,浏览器就会接收到更新并且自动刷新。
这一步的另一个动作就是parcel会自动把打包好的文件放到/dist
目录下,如果需要部署到生产环境,只需要把dist文件夹中的文件拷贝到服务器相关目录即可,十分简单。
注意
- 如果你在使用
parcel name.js
打包代码时,出现如下错误:
UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: 'super' keyword unexpected here
那么表示你的Node版本不够高,最好更新到V8.0以上。
- 在打包之间记得安装所有的依赖。如果是Babel等工具,请做好预设,具体请参考Parcel官网。
Parcel是个好玩意儿的更多相关文章
- android 进程间通信数据(一)------parcel的起源
关于parcel,我们先来讲讲它的“父辈” Serialize. Serialize 是java提供的一套序列化机制.但是为什么要序列化,怎么序列化,序列化是怎么做到的,我们将在本文探讨下. 一:ja ...
- 如何利用Cloudera Manager来手动安装parcel包
1.问题的描述: 当你利用Cloudera Manager部署了CDH的集群后,也许随着你的业务需求,你需要对你的就去哪做一些优化,或者扩展之类的,这个时候你可能需要下载安装一些组件.例如,我最近在阅 ...
- android 进程间通信数据(二)------parcel的实现
Serialize是java原生就自带的东西,我们可以看到android的源码 所以看看android是如何实现parcel的,这对我们自己代码设计有什么启发. Parcel: 在android中,p ...
- 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)[zz]
openssl dgst –sign privatekey.pem –sha1 –keyform PEM –c c:\server.pem 将文件用sha1摘要,并用privatekey.pem中的私 ...
- Cloudera CDH 、Impala本地通过Parcel安装配置详解及什么是Parcel
本文引用自:Cloudera CDH .Impala本地通过Parcel安装配置详解及什么是Parcelhttp://www.aboutyun.com/forum.php?mod=viewthread ...
- Cloudera CDH 、Impala本地通过Parcel安装配置详解
一.Parcel本地源与Package本地源的区别 本地通过Parcel安装过程与本地通过Package安装过程完全一致,不同的是两者的本地源的配置. 区别如下: Package本地源:软件包是.rp ...
- ANDROID_MARS学习笔记_S01原始版_018_SERVICE之Parcel
一.代码 1.xml(1)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...
- Android中的Parcel机制 实现Bundle传递对象
Android中的Parcel机制 实现了Bundle传递对象 使用Bundle传递对象,首先要将其序列化,但是,在Android中要使用这种传递对象的方式需要用到Android Parc ...
- android 对象传输及parcel机制
在开发中不少要用到Activity直接传输对象,下面我们来看看,其实跟java里面差不多 自定义对象的传递:通过intent传递自定义对象的方法有两个 第一是实现Serialization接口: ...
随机推荐
- javascript array类型用法
javascript高级编程-Array引用类型用法总结 2016-09-17 | 357 引用类型-Array类型 引用类型是一种数据结构,用于将数据和功能联系起来. 创建对象的方式: ...
- php中array_walk() 和 array_map()两个函数区别
两个函数的共性和区别: 1.传入这两个函数的 $value,就是数组中的单一个元素. 2.array_walk() 仅返回true或者false,array_map() 返回处理后的数组: 3.要得到 ...
- css样式美化 下拉框 select 样式
<span class="setleft wid80"><span class="fyhbx">*</span>入库类型 : ...
- js/jq和a标签(刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式)//js/jq分页
1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...
- 二:Nexus知识
Nexus访问 Http://localhost:8080/nexus Nexus登陆 用户:admin 密码:admin123 Nexus仓库 nexus的仓库类型分为以下四种: group: 仓库 ...
- JavaScript--3种函数调用的方法
1.函数的简单调用: <script > function fn(p){ alert(p); } </script> <body><script> fn ...
- IntelliJ IDEA 16创建Web项目
首先要理解一个概念:在IntelliJ IDEA中“new Project”相当于eclipse中的工作空间(Workspace),而“new Module”相当于eclipse中的工程(Projec ...
- 小任务之Canvas绘制时钟
背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/ ...
- SPOJ QTREE6
题意 给你一棵\(n\)个点的树,编号\(1\)~\(n\).每个点可以是黑色,可以是白色.初始时所有点都是黑色.有两种操作 \(0\ u\):询问有多少个节点\(v\)满足路径\(u\)到\(v\) ...
- 前端学习之路之CSS (二)
Infi-chu: http://www.cnblogs.com/Infi-chu/ id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 &quo ...