今天学习了一下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是个好玩意儿的更多相关文章

  1. android 进程间通信数据(一)------parcel的起源

    关于parcel,我们先来讲讲它的“父辈” Serialize. Serialize 是java提供的一套序列化机制.但是为什么要序列化,怎么序列化,序列化是怎么做到的,我们将在本文探讨下. 一:ja ...

  2. 如何利用Cloudera Manager来手动安装parcel包

    1.问题的描述: 当你利用Cloudera Manager部署了CDH的集群后,也许随着你的业务需求,你需要对你的就去哪做一些优化,或者扩展之类的,这个时候你可能需要下载安装一些组件.例如,我最近在阅 ...

  3. android 进程间通信数据(二)------parcel的实现

    Serialize是java原生就自带的东西,我们可以看到android的源码 所以看看android是如何实现parcel的,这对我们自己代码设计有什么启发. Parcel: 在android中,p ...

  4. 那些证书相关的玩意儿(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中的私 ...

  5. Cloudera CDH 、Impala本地通过Parcel安装配置详解及什么是Parcel

    本文引用自:Cloudera CDH .Impala本地通过Parcel安装配置详解及什么是Parcelhttp://www.aboutyun.com/forum.php?mod=viewthread ...

  6. Cloudera CDH 、Impala本地通过Parcel安装配置详解

    一.Parcel本地源与Package本地源的区别 本地通过Parcel安装过程与本地通过Package安装过程完全一致,不同的是两者的本地源的配置. 区别如下: Package本地源:软件包是.rp ...

  7. ANDROID_MARS学习笔记_S01原始版_018_SERVICE之Parcel

    一.代码 1.xml(1)activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...

  8. Android中的Parcel机制 实现Bundle传递对象

    Android中的Parcel机制    实现了Bundle传递对象    使用Bundle传递对象,首先要将其序列化,但是,在Android中要使用这种传递对象的方式需要用到Android Parc ...

  9. android 对象传输及parcel机制

    在开发中不少要用到Activity直接传输对象,下面我们来看看,其实跟java里面差不多   自定义对象的传递:通过intent传递自定义对象的方法有两个  第一是实现Serialization接口: ...

随机推荐

  1. KVC的特殊用法

    - (id)valueForKeyPath:(NSString *)keyPath方法的强大用法,举个例子: NSArray *array = @[@"name", @" ...

  2. LVS+keepalived DR模式配置高可用负载均衡集群

    实验环境 LVS-Master 10.0.100.201 VIP:10.0.100.203 LVS-Slave       10.0.100.204 WEB1-Tomcat 10.0.2.29 gat ...

  3. linux系统修改route路由

    linux下静态路由修改命令方法一:添加路由route add -net 192.168.0.0/24 gw 192.168.0.1route add -host 192.168.1.1 dev 19 ...

  4. [转]oracle update set select from 关联更新

    本文转自:http://blog.csdn.net/disiwei1012/article/details/52589181 http://www.blogjava.net/Jhonney/archi ...

  5. css样式margin padding border

  6. nodejs中cookie、session的使用

    因为http会话的无状态性,为了标记用户的登录状态,便出现了cookie.cookie分为很多种,有普通cookie.签名cookie.json cookie等,这里主要记录下在express应用中如 ...

  7. css3之弹性盒模型初探(一)

    什么是弹性盒模型? 弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小. 弹性盒模型的提出可以解决一些响应式布局的需求   如何使用弹性盒模型? ...

  8. Goodbye Bingshen

    在uoj上打的第二场比赛......还凑合(卧槽C题80分没了QAQ 第一次接触交互题还挺好玩的哈哈 可能是人比较多吧.....rating涨了不少...... 现在我rating正好比lrd高1哈哈 ...

  9. xunsearch bsd 10.1安装心酸路。。。

    cc -c -I/usr/local/xunsearch/include/ test.cpp cc test.o -L/usr/local/xunsearch/lib -lscws -lm -o te ...

  10. Kafka配额讨论(流量限制)

    Kafka自0.9.0.0版本引入了配额管理(quota management),旨在broker端对clients发送请求进行限流(throttling).目前Kafka支持两大类配额管理: 网络带 ...