正处于难得的空档期，五一去和大学的基友去日本的东北玩了一大圈（东京-仙台-角馆-田泽湖-秋田-弘前-青森-东京），回来也该收收心了。周末无事，浅浅的研究了一下现在大热的直播技术。同时也在这里记录一下。
直播流程（原理）
PC端/IOS/Android -> 压缩编码过程（H.264/ACC）-> 字幕叠加（视频本身处理）-> 推流 -> CDN -> 直播（终端显示直播流）
more >>关于RN项目升级(-)
说道RN，依稀记得去年刚来时接触的时候还是0.38。之后公司要搞App，选了一个不新不旧的版本0.44.3。再到之后为了做一个滤镜的效果，依赖于gl-react和gl-react-native这个库。为了追究更好的体验和兼容Android机，将版本升级成了0.46.4。离职之后最近一直在看web，没怎么看RN这块。没想到现在RN已经更新到了0.55.3。（FB团队是真的勤快）,主要是闲的蛋疼。把自己的一个个人小项目升级了一波。顺便总结一下这一年RN 组件和API的变化以及升级方法。
组件上的变化：
新增了：ImageBackground（背景图片组件，它是一个容器组件。当然有了它，也就不支持Image直接包裹的形式）、FlatList、SectionList、VirtualizedList（FlatList、SectionList的底层实现）、SwipeableFlatList（类似于ios备忘录从右往左划出现的效果，带滑动显示更多菜单的FlatList组件）、MaskedViewIOS（可以为组件添加一个透明的遮罩）以及为了适配ipX，0.50出现的SafeAreaView。
新增的Api：
自身使用上，主要用了AccessibilityInfo（判断屏幕阅读器是否处于激活状态）以及DeviceInfo（一个类专门提供屏幕尺寸，字体缩放等信息）。
YellowBox（可以屏蔽指定的警告，这个其实也很好用，0.44版本提供的。在公司项目中由于使用了code push。但是在开发环境没有配置key。每次刷新都会弹错，有了它就解决了这个问题。当然更好的办法就是在dev环境配个key）
BackAndroid也被BackHandler所替换。在原有的基础上做了加强和补充。
其他：
- View.propTypes -> ViewPropTypes
- takeSnapshot:从 UIManager 移动到 ReactNative(截图的话，疯狂安利：react-native-view-shot)
- react-navigation 代替 Navigator、NavigationExperimental。（前一阵尝试了一下 react-native-router-flux 体验也不错）
从零配置Webpack4.0搭建一个React工程
最近一直大部分精力都在搞App以及Node。前端这块作为初心，还是不能落下。这里不用cli。一步一步记录从零配置Webpack，来搭建起React项目。复习一下Webpack的配置。以及一些前端工程化的一些思考
前段工程化思考
说道前端工程化，最重要的一个目的就是：解放生产力。对源代码进行预处理、自动打包/自动更新页面显示、去处理图片依赖和正式环境统一这几点在开发中极大提高了开发的效率。在搭建起项目工程之后开发人员只需要关注业务/代码即可。第二点就是保证项目质量，在多人协作，不同环境下开发。通过code lint等约束以及git commit预处理保证代码风格的一致统一，这一点对后续的代码维护很重要。第三就是优化。通过前端工程化、自动化去合理的压缩合并资源文件。这些大部分恰巧webpack帮我们完成了。
在vue和react开发中，通过脚手架工具，生成项目之后，只要run一下项目就跑起来了。然而cli给我们提供的只是一个泛模板。然而我们想要去定制它、修改它。就需要深入了解它，知道他是怎么跑起来的。我想考虑的前端工程化，这是每一个前端er绕不开的话题。坑越早开越好>_<
Webpack基础配置
这里首先我们要明确webpack工程架构的核心是什么？
– loader机制 （不同loader去处理不同的文件。甚至你可以自己创造一个文件，并作出对应的loader来处理它）
node图片合成
最近在工作上有一个需求是在server(node.js)，将几张图片和文字合成。
经过google一番，尝试了3个库：
node-images： 国人开发的一个轻量级，不需要额外安装依赖的图片处理库。可以实现图片大小，合并等功能。本打算使用它来完成需求。不过已经近一年不维护了。node 8.x版本跑步起来。看了一下issue，发现各个平台、系统的兼容性堪忧。还是不去踩这个坑了。另外其也不支持文字写入。
node-canvas：功能很强大，搜到不少Demo，没有做深入调研。应该是可以实现需求。
终于到了重点：gm。nodeJs对GraphicsMagick和ImageMagick的封装。图片处理的老牌工具，包含各种各样的功能。由于两个工具本身都不是js实现，所以需要额外安装。这里就主要说说gm。
RN-CameraRoll
最近APP有一个业务需求，需要将APP中web加载出来的图片保存到本地,保存至本地相册。很方便的是RN为我们提供了CameraRoll模块，以获得去访问本地相册，以及将图片存储至相册的功能。这里我们主要用将图片存储这个功能。访问相册的话，由于CameraRoll没有提供相册UI页面以及诸多功能。要实现选取图片的话还是使用第三方的react-native-image-crop-picker微妙。基本没什么坑
node-path
最近在看node，仿照anywhere，自己也撸了一个静态资源服务器。说道静态资源服务器，
大量运用了路径层级这块。一开始又是相对路径，绝对路径，暴露的接口也是一大堆，有点懵逼。
遂对着官方文档撸一遍，这里笔记总结一下。
path.basename(path[, ext])
- path
路径 - ext
可选参数
path.basename()返回路径的最后一部分
eg:
1 | path.basename('/foo/bar/baz/asdf/quux.html'); |
node服务器开发上线小记
说道node，之前其实也没少用。不过大部分都是自己搞着玩，
写个小爬虫或是在本地为自己的前端项目跑个接口。
实际开发生产中经验为零。正巧工作中自己负责的APP项目的新模块后台要独立出来，
借此机会使用走了一趟node开发到上线的全过程（express+mongoDB）。
缺失模块。
1、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save
2、在根目录_config.yml里添加配置：
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
残り全部バケーション