今天学习了一下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. 2.1 js 基础--select深入

    select     获取select下的所有option     用op=select.options         option属性:op[1].value,op[1].text;     // ...

  2. 在Xcode中手动添加pch文件

    在Xcode中手动添加pch文件: 一: 在工程中新建.pch文件,pch文件名通常用工程名字命名: 二: 在Targets->build Settings->Prefix Header ...

  3. leetcode_787【K 站中转内最便宜的航班】

    有 n 个城市通过 m 个航班连接.每个航班都从城市 u 开始,以价格 w 抵达 v. 现在给定所有的城市和航班,以及出发城市 src 和目的地 dst,你的任务是找到从 src 到 dst 最多经过 ...

  4. 实现 如 goole closure 类似功能模块加载函数

    看过goole  closure 的同学都知道  其中定义一个类名函数时候只要  inlude("")   想加载某个模块只要require("")就可以利用: ...

  5. smarty assign 赋值

    assign赋值 void assign (mixed var) void assign (string varname, mixed var) This is used to assign valu ...

  6. 关于sql优化整理一下

    1.where 子句中可以对字段进行 null 值判断吗?        可以,比如 select id from t where num is null 这样的 sql 也是可以的.但是最好不要给数 ...

  7. 反汇编调试Android

    https://code.google.com/p/android/issues/detail?id=73076 http://my.unix-center.net/~Simon_fu/?p=527 ...

  8. tapable事件流插件

    tapable Webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundl ...

  9. csharp:Google TTS API text to speech

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. 记录开发Nodejs c++ addon的一些经验(二、数据类型的转换(尤其是Buffer))

    常见的数据类型的转换基本比较容易,结合nan应该不是一件难事 参考链接: http://blog.jobbole.com/109598/ http://deadhorse.me/nodejs/2012 ...