前端之旅

首选我们需要安装babel-cli

npm install –save-dev babel-cli

在根目录下创建一个.babelrc文件

安装babel的ES6的preset
npm install –save-dev babel-preset-es2015

添加一个File watcher
在Settings > Tools > File Watchers 添加Babel的watcher，记得前面要打对勾选中！
Program的设置为
$ProjectFileDir$\node_modules\.bin\babel.cmd
现在改变js文件的话应该就会默认在根目录底下创建出dist文件夹，转换好的js文件就会出现在里面啦！
如果报错的话可以将Arguments里的dev改成es2015，如下：
$FilePathRelativeToProjectRoot$ –out-dir dist –source-maps –presets es2015
这样是直接编译目录, 我需要编译单个文件:
配置应该是:
$FilePathRelativeToProjectRoot$ –out-file $FileDir$\$FileNameWithoutAllExtensions$.min.$FileExt$ –watch –presets es2015
但是这样的话, 我的最终编译文件也会被监控编译导致死循环,

因此需要这样设置(排除min.js文件)!

然后就可以了!

编译结果:

pm2命令使用（项目更目录下使用）：

$ pm2 start app.js  启动app项目

$ pm2 list 列出由pm2管理的所有进程信息，还会显示一个进程会被启动多少次，因为没处理的异常。

$ pm2 monit 监视每个node进程的CPU和内存的使用情况

$ pm2 logs 显示所有进程日志

$ pm2 stop all 停止所有进程

$ pm2 restart all 重启所有进程

$ pm2 reload all 0秒停机重载进程 (用于 NETWORKED 进程)

$ pm2 stop 0 停止指定的进程

$ pm2 restart 0 重启指定的进程

$ pm2 startup 产生 init 脚本 保持进程活着

$ pm2 web 运行健壮的 computer API endpoint (http://localhost:9615)

$ pm2 delete 0 杀死指定的进程

$ pm2 delete all 杀死全部进程

启动进程的方式详细：

$ pm2 start app.js -i max 根据有效CPU数目启动最大进程数目

$ pm2 start app.js -i 3 启动3个进程

$ pm2 start app.js -x 用fork模式启动 app.js 而不是使用 cluster

$ pm2 start app.js -x -- -a 23 用fork模式启动 app.js 并且传递参数 (-a 23)

$ pm2 start app.js --name serverone 启动一个进程并把它命名为 serverone

$ pm2 stop serverone 停止 serverone 进程

$ pm2 start app.json 启动进程, 在 app.json里设置选项

$ pm2 start app.js -i max -- -a 23 在–之后给 app.js 传递参数

$ pm2 start app.js -i max -e err.log -o out.log 启动 并 生成一个配置文件

配置pm2启动文件：

可以通过pm2 start processes.json来启动。

在项目根目录下添加文件processes.json：

processes.json说明：

• apps:json结构，apps是一个数组，每一个数组成员就是对应一个pm2中运行的应用
• name:应用程序名称
• cwd:应用程序所在的目录
• script:应用程序的脚本路径
• log_date_format:
• error_file:自定义应用程序的错误日志文件
• out_file:自定义应用程序日志文件
• pid_file:自定义应用程序的pid文件
• instances:
• min_uptime:最小运行时间，这里设置的是60s即如果应用程序在60s内退出，pm2会认为程序异常退出，此时触发重启max_restarts设置数量
• max_restarts:设置应用程序异常退出重启的次数，默认15次（从0开始计数）
• cron_restart:定时启动，解决重启能解决的问题
• watch:是否启用监控模式，默认是false。如果设置成true，当应用程序变动时，pm2会自动重载。这里也可以设置你要监控的文件。
• merge_logs:
• exec_interpreter:应用程序的脚本类型，这里使用的shell，默认是nodejs
• exec_mode:应用程序启动模式，这里设置的是cluster_mode（集群），默认是fork
• autorestart:启用/禁用应用程序崩溃或退出时自动重启
• vizion:启用/禁用vizion特性(版本控制)

也可以把启动命令写在package.json里：

快速启动: pm2 start main.php –name worker –interpreter php — queue:work –daemon

参考文档: https://github.com/pm2-hive/pm2-hive.github.io/blob/master/docs/features/quick-start.md

修改网络连接，修改hosts文件。

在项目里，大多时候都能看到.editorconfig文件，刚开始总是忽视掉它，认为它不太重要。但是，它的存在，必定有它的理由，于是，抽空来研究一下，它是什么，能做什么。

官网是这么介绍EditorConfig的，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。

EditorConfig项目由用于定义编码样式的文件格式和一组文本编辑器插件组成，这些插件使编辑器能够读取文件格式并遵循定义的样式。

EditorConfig文件易于阅读，并且与版本控制系统配合使用。” 不同的开发人员，不同的编辑器，有不同的编码风格，而EditorConfig就是用来协同团队开发人员之间的代码的风格及样式规范化的一个工具，而.editorconfig正是它的默认配置文件。

# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true

# 匹配全部文件
[*]
# 结尾换行符，可选”lf”、”cr”、”crlf”
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 匹配js和py结尾的文件
[*.{js,py}]
# 设置字符集
charset = utf-8

# 匹配py结尾的文件
[*.py]
# 缩进风格，可选”space”、”tab”
indent_style = space
# 缩进的空格数
indent_size = 4

# 以下匹配，类同
[Makefile]
indent_style = tab
# tab的宽度
tab_width = 4

# 以下匹配，类同
[lib/**.js]
indent_style = space
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

NodeJS的JavaScript运行在单个进程的单个线程上，一个JavaScript执行进程只能利用一个CPU核心，而如今大多数CPU均为多核CPU，为了充分利用CPU资源，Node提供了child_process和cluster模块来实现多进程以及进程管理。本文将根据Master-Worker模式，搭建一个简单的服务器集群来充分利用多核CPU资源，探索进程间通信、负载均衡、进程重启等知识。

下图是Master-Worker模式，进程分为master进程和worker进程，master进程负责调度或管理worker进程，worker进程则负责具体的业务处理。在服务器层面，worker可以是一个服务进程，负责处理来自客户端的请求，多个worker便相当于多个服务器，从而构成一个服务器集群。master则是负责创建worker，将来自客户端的请求分配到各个服务器上去处理，并监控worker的运行状态以及进行管理等操作。

child_process模块提供了spawn()、exec()、execFile()、fork()这4个方法用于创建子进程，本文将使用fork()方法来创建子进程，fork()方法只需指定要执行的JavaScript文件模块，即可创建Node的子进程。下面是简单的HelloWorld示例，master进程根据CPU数量创建出相应数量的worker进程，worker进程中利用进程ID来标记自己。

父进程:

子进程:

log输出内容:

还是挺好用的,看这执行情况, 应该比php效率更高~~~

TypeError: this.cliEngine is not a constructor

报错:

修改这个文件/Applications/WebStorm.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js

重启webstorm/phpstorm就可以了

使用 nodeJs 递归拷贝一个目录到另一个目录

这个功能经常用到, 代码逻辑记录一下:

首选我们在change事件之后操作:

viedoFirst 方法:

最终视频的首帧图已经保存在我们 this.firstBaseData 里面了, 简单效果如下:

这是刚从视频获取到的首帧图!

近期, 为了学习React相关知识,简单开发了一个小工具, 使用的技术栈是:

Electron + React + PHP, UI框架使用了element, 大概长这样!

具体的开发思路如下

首先我使用react启动服务, 然后使用 Electron 打开服务URL,

当借口请求完成之后, 循环代理IP, 使用 Electron 的 remote 来动态调用 Electron 里面定义的检测服务! 检测完成之后, 挨个更新 数据, 显示结果

remote 方法定义如下:

目前项目只完成一半功能, 后面有时间, 再完善其他

项目地址: https://gitee.com/shala/Electron-React

我们使用 react脚手架create-react-app 来构建 react 项目;

一、安装 npm install -g create-react-app

二、创建react应用

create-react-app是全局命令来创建react项目

create-react-app 项目名称

创建成功后

今天我们主要看看 路由及路由嵌套

我们新建一个router.js

路由嵌套, 我们主要给Home路由嵌套子页面

这样, 我们访问到: #/home/abc 时候, 加载 omponent={Details} 组件

访问到: home/abc/def, 加载 component={DetailsDef} 组件