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接口: ...
随机推荐
- 2.1 js 基础--select深入
select 获取select下的所有option 用op=select.options option属性:op[1].value,op[1].text; // ...
- 在Xcode中手动添加pch文件
在Xcode中手动添加pch文件: 一: 在工程中新建.pch文件,pch文件名通常用工程名字命名: 二: 在Targets->build Settings->Prefix Header ...
- leetcode_787【K 站中转内最便宜的航班】
有 n 个城市通过 m 个航班连接.每个航班都从城市 u 开始,以价格 w 抵达 v. 现在给定所有的城市和航班,以及出发城市 src 和目的地 dst,你的任务是找到从 src 到 dst 最多经过 ...
- 实现 如 goole closure 类似功能模块加载函数
看过goole closure 的同学都知道 其中定义一个类名函数时候只要 inlude("") 想加载某个模块只要require("")就可以利用: ...
- smarty assign 赋值
assign赋值 void assign (mixed var) void assign (string varname, mixed var) This is used to assign valu ...
- 关于sql优化整理一下
1.where 子句中可以对字段进行 null 值判断吗? 可以,比如 select id from t where num is null 这样的 sql 也是可以的.但是最好不要给数 ...
- 反汇编调试Android
https://code.google.com/p/android/issues/detail?id=73076 http://my.unix-center.net/~Simon_fu/?p=527 ...
- tapable事件流插件
tapable Webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundl ...
- csharp:Google TTS API text to speech
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 记录开发Nodejs c++ addon的一些经验(二、数据类型的转换(尤其是Buffer))
常见的数据类型的转换基本比较容易,结合nan应该不是一件难事 参考链接: http://blog.jobbole.com/109598/ http://deadhorse.me/nodejs/2012 ...