最近计划(Parcel + async/await)——2018.02.13
Closed this issue · 3 comments
zhongdeming428 commented
学习阮一峰的jstraining教程,着重学习测试框架。
zhongdeming428 commented
最新进度
学习了一下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官网。
zhongdeming428 commented
学习笔记
三个比较好用的React组件库:
- React-Bootstrap:https://react-bootstrap.github.io/
- ReCharts 是一个 React 图表组件库。http://recharts.org/
- Ant-Design 阿里开发的React组件库 https://ant.design/index-cn
一个值得关注的状态管理库:Mobx
zhongdeming428 commented
学习笔记
在Node中使用ES7新特征——async、await。
这两个关键字是在ES7中添加的新特征,旨在更加直观的书写异步函数,避免出现callback hell。
callback hell:
readFileContents("a.txt", function (a){
readFileContents("b.txt", function (b){
writeFileContents("ab.txt", a + b, function(){
console.log("we are done");
});
});
});
上方代码即为callback hell,简单的逻辑当我们用异步编程方式书写出来时,会变得非常难以理解以及维护。现在看上去或许情况不是那么的糟糕,但是当异步数量相当大的时候,维护代码简直会是一场灾难。
为了防止这种情况的出现,ES7新增了async、await关键字。那么他们的作用是什么呢?
简而言之:
- async关键字用于函数声明之前,表示该函数为async函数,await只能在async函数内部使用,否则会报错
- await关键字用在调用函数之前,表示调用的函数是一个异步函数,该函数一般会返回一个Promise对象,await在等待返回数据之后再往下执行。如果等待的函数返回的不是一个Promise对象,那么await关键字会失效。