Get Start

原本的测试单元都是和源码用tsc编译到dist文件夹后, 再启动测试, 这样无疑浪费不少的时间, 无意间找到这个框架.

Its Example

官方的写法, 就是像mocha那样, 直接运行ts-mocha就可以了, 但我就直接报错, 提示我[ERROR] tsconfig_1.loadSync is not a function.

Google了一下, 原因不明. 貌似没人遇上这个情况, 是我弄错了吗? 那行, 我去瞧瞧别人的例子.

Other Example

别人也是直接用ts-mocha, 但有点不同, 在mocha.opts里面有一句--require ts-mocha,

1 2	--require ts-mocha --require should

这个在文档中没有任何的说明, 难道用了就有神效?

And Me

在mocha.opts里面补上--require ts-mocha后, 其余照旧(除了提出tsc这步), 测试成功运行. 可能原本官方就提供这个方法, 后来在README里面删除了. 不过现在可以了. 希望以后不要再踩这个坑吧.

Update at 2018-01-09

之前用上了ts-mocha, 后来我看了一下代码, 其实就是一个ts-node的二次封装, 所以干脆就用回ts-node. 将mocha.opts里面的--require ts-mocha换成--require ts-node/register, 执行测试一下可以用.

Generate Cover Reporter Fail

虽然测试正常运行, 但生成的覆盖报告却是空的, 可能是参数没有补齐. 好在nyc官方提供了相关的文档, 注意其中几点就行了:

需要source-map-support

1	npm install --save-dev source-map-support

补上重要的nyc参数

{
  ...
  "extension": [
    ".ts", ".tsx"
  ],
  "all": true,
  "cache": true
  ...
}

再适当地用include和exclude, 覆盖报告就回来了.

2017-12-10

Javascript

好用的Node 库

从13年接触angular开始，就不断接触摸索各种node库，感叹前端圈的变化之大。下面本人将用过的，收集来的库整理出来，望有缘人需要它们

已经用过了的

博客类

npm:hexo
- npm:hexo-admin
  这个插件背后是一个美好的爱情故事
- npm:hexo-deployer-git
  自从某个版本出问题之后, 我就用Travis帮我发布
- npm:hexo-filter-cleanup
  咱就是用这个压缩混肴的

构建工具

Grunt

Grunt已经算是古老的产物, Gulp出现后就一下子超越他, 不过某些旧项目还是需要了解它的.

npm:grunt
- npm:grunt-contrib-htmlmin
- npm:grunt-contrib-stylus
- npm:grunt-contrib-cssmin
- npm:grunt-autoprefixer
- npm:grunt-contrib-imagemin
- npm:grunt-contrib-clean
- npm:grunt-contrib-copy
- npm:grunt-contrib-watch

Gulp

npm:gulp
npm:gulp-cli
npm:gulp-jade
jade已经改名叫pug
npm:gulp-pug
npm:gulp-ejs
npm:gulp-htmlmin
npm:gulp-processhtml
npm:gulp-typescript
npm:gulp-coffee
npm:gulp-coffeelint
npm:gulp-ng-annotate
npm:gulp-uglify
npm:gulp-stylus
npm:gulp-autoprefixer
npm:gulp-csso
npm:gulp-imagemin
npm:gulp-cached
npm:gulp-remember
npm:gulp-clean
npm:gulp-concat
npm:gulp-exec
npm:gulp-if
npm:gulp-lintspaces
npm:gulp-rename
npm:gulp-replace
npm:gulp-run-sequence
npm:gulp-supervisor
npm:gulp-tap
npm:gulp-load-plugins
npm:gulp-task-listing
npm:gulp-karma
npm:gulp-mocha

语言相关

CoffeeScript

npm:coffee-script
npm:coffeelint

TypeScript

npm:typescript
npm:ts-node
npm:tsconfig-paths
当用的TS的paths功能时, 就需要它了
npm:ts-mocha
如果用了mocha来测试, 并且测试文件用Typescript编写, 建议用这个框架
npm:tshint

基础加强集合

npm:glob
npm:fs-extra
npm:rimraf
平时用于npm script, 比系统提供的稳定
npm:mkdirp
fs-extra里面已经有这个功能了, 现在用于npm script
npm:targz
用来处理.tar.gz压缩包
npm:config-yaml
npm:yaml-config
config-yaml和yaml-config的区别就是前者不需要根据环境变量, 就像平常JSON.parse一样, 后者就是多了一层环境变量的嵌套
npm:once
npm:bluebird
path-exists
因为fs.exists已经deprecated

工具集

npm:lodash
npm:md5
npm:md5-file
可以自己用md5改写
npm:rxjs
npm:y-config
npm:node-schedule
npm:schedule-cache
我用node-schedule弄了一个定时Cache库
npm:validator
- npm:class-validator
npm:moment
npm:moment-timezone
npm:ms
相关时间和毫秒互转
npm:optional
其实就是一个自带trycatch的require

运行环境

npm:cross-env
npm:nrm
npm:nvm

服务器相关

NestJS
- npm:@nestjs/core
- npm:@nestjs/common
- npm:@nestjs/testing
  测试Nest时需要它
npm:express
- npm:express-session
npm:multer
npm:body-parser
npm:cors
npm:cookie-parser
npm:socket.io
npm:nodemailer
npm:http-proxy-middleware

数据库相关

npm:mongoose
npm:lowdb

页面端相关

因为一直在angular圈打转，基本没用过vue和react，所以就没有它们的。

npm:jquery
npm:bootstrap
npm:fullpage.js

图表

npm:echarts
百度的图表库
npm:datavjs
淘宝的图表库
npm:d3

动画

npm:animate.css
npm:theaterjs
很炫的输入动画库

AngularJS

npm:angular
- npm:angular-animate
- npm:angular-messages
- npm:angular-route
- npm:angular-translate
- npm:angular-translate-loader-partial
- npm:angular-file-upload

Angular

npm:ngx-echarts
背后是百度的echarts
npm:ng2-file-upload
npm:ng-zorro-antd
蚂蚁的UI库, 不解释

客户端相关

npm:electron
- npm:electron-builder
- npm:electron-packager

命令行端相关

npm:yargs
可以用它解析命令行参数
npm:inquirer
写过yo的脚手架就知道这个提示是多好用
npm:ora
进度显示, 非常方便
npm:chalk
npm:cliui
npm:os-homedir
获取用户目录位置
npm:get-stdin

测试相关

npm:karma
AnuglarJS测试用的
- npm:karma-coffee-preprocessor
- npm:karma-ie-launcher
- npm:karma-firefox-launcher
- npm:karma-safari-launcher
- npm:karma-chrome-launcher
- npm:karma-phantomjs-launcher
- npm:karma-jasmine
- npm:karma-coverage
- npm:karma-junit-reporter
- npm:karma-story-reporter
npm:mocha
- npm:mochawesome
npm:should
npm:rewire
用于改写库的私有变量, 相当好用
npm:faker
模拟数据用, 你懂的
npm:nyc
npm:istanbul
npm:source-map-support
npm:supertest
npm:supertest-session
因为supertest不支持保存session
npm:phantomjs-prebuilt
npm:coveralls
会将测试报告上传到coveralls.io, 常用的写法是cat ./coverage/lcov.info | coveralls
npm:standard
统一处理.js格式问题
npm:cheerio
性能优秀, 可以用来做HTML爬虫解析

调试相关

npm:debug
npm:browser-sync
npm:connect-livereload
当年的F5解放组件, 但现在通过socket接收刷新信号来取代它取代了

运维相关

npm:forever
npm:pm2
自从有了pm2之后, 就没forever的事了

日志相关

npm:log4js
npm:bunyan
npm:morgan

文档生成

npm:apidoc

别人推荐或收集回来的

下面是别人推荐或者自己收集回来的, 暂时没有尝试过

页面端相关

Angular

npm:ng2-admin
- github:ngx-admin

测试相关

npm:randexp
根据RegExp规则生成随机字符串
npm:jest
npm:ava
npm:tape
npm:enzyme
npm:mocha-steps

2017-07-04

流程化运行Typescript 项目

0 Introduction

之前(链接)说到, Nodejs 项目中, 开始用上Typescript. 在开发上非常流畅, 甚至在怀疑之前自己为什么不用它.

可这东西交到运维手上前, 发生了另外的事情.

1 ts-node 坑

项目的开始, 就用上了ts-node, 当时用得挺好的, 可惜在开发调试上强差人意, 所以在开发环境下, 并没有使用, 而是经过gulp转换一下, 由于历时比较久, 所以到放在生产环境上出现各种问题, 基于项目急需上线的关系, 觉得暂时也经过gulp转一下就上线.

2 Now

首先要考虑的是构建Docker Image的问题, 因为要构建的原因, 所以流程和命令, 能简化得简化, 这样不论运维, 还是新进的开发, 也能快速使用.

整理一下流程, 就是Gulp ===> Run. 但由于文件已经写好了, NODE_ENV=production就使用ts-node. 必须在不影响源码的情况下解决这个问题, 最简单的是在node .前面加上NODE_ENV=development, 在跨平台下, window的同事是用不上这段命令的, 好在, 万能google 告诉我们, 用cross-env就行了.

安装 cross-env

1	npm install -D cross-env

在package.json 追加命令

"scripts": {
    "prestart": "./node_modules/.bin/gulp",
    "start": "cross-env NODE_ENV=development node ."
}

一开始也奇怪, 一般来说, cross-env并非全局变量, 应该写成./node_modules/.../cross-env. 但按照这个情况, 那经过--save-devor-D安装的node module, 在npm script里是直接在全局中, 那么将prestart改为"prestart": "gulp", 是否也能达成相同的效果呢?

答案是可行的.

3 And

经过这次折腾, 留意到-D有着原本不知道的能力, 那前面的项目的测试命令, 是否应该都改为这个形式呢, 这个要看项目时间吧.

毕竟.

程序猿都是懒惰的.

2017-06-07

在VS Code 上调试TypeScript

0 Introduction

上一篇(链接)已经说到, 最近用上了Typescript, 也在不同的项目中加上它. 仔细想想, TS 真的特别适合用在Nodejs 的开发上, 所以就开始了Nodejs 项目的改造.

1 Now

现在TypeScript 的部署, 基本上就是将src/目录的.ts文件编译到build/上, 再运行build/上的文件.

感觉上这很累赘, 在开发环境上还好说, 但在生成环境上, 既要保证有相应的写入权限, 还要白白浪费位置(如果说编译完后在删除src/目录, 你当我没说上面的话). 加上之前是写CoffeeScript时有神器require('coffee-script/register');, 将.coffee文件编译成.js放到内存里面运行. 为了这个事情, 我G 了好几下, 发现TS 也有这种神器ts-node, 用法也差不多.

2 Found

就在我为找到ts-node而高兴的时候, 发现一个问题, 就是断点. 在VS Code 上, 断点JS 文件很简单的事, 然而断点TS 文件, 却提示我由于未找到生成的代码，已忽略断点(是否是源映射问题?). 这个容易, 直接复制G 一下就知道解决办法, 肯定也有人遇上这问题.

然而, 并没有.

喵? 是大家不需要这功能还是只是我的设置有问题? 不对不对, 肯定有人也和我一样的, 难道是新版本有了中文, 以前是英文, 所以大家搜的是英文? 嗯, 那试试看.

搜了一下, 找到这一报错信息的英文原版Breakpoint Ignored Because Generated Code Not Found, 突然觉得翻译这句话的人, 友好度MAX, 直接就提示咱们天朝人是源映射问题!!

很多歪果仁遇上这个问题, 不是调试TS 时遇上的, 而是做ES6 -> ES5 时遇上的, 嗯, 方法通用就好了.

3 Resolve

下面是解决时间

Before

先看看目录结构

/
  |- build/
  |  |- index.js
  |  |- ...
  |
  |- src/
  |  |- index.ts
  |  |- ...
  |
  |- index.js
  |- package.json

首先是TS 的编译, 这里我用Gulp代替

// gulpfile.js
// ...
gulp.task('build', [..., 'build:ts']);
gulp.task('build:ts', () => {
    gulp.src('src/**/*.ts')
        .pipe($.sourcemaps.init())
        .pipe($.typescript())
        .pipe($.sourcemaps.write('.', {
            sourceRoot: (file) => {
                return `${file.cwd}/src`;
            }
        }))
        .pipe(gulp.dest('build/'));
});
// ...

注意了, 这里的sourceRoot一定要设置, 否则定位不回源文件的.

添加一个VS Code的Task 来触发它.

// .vscode/task.json
{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "build",
            "args": [],
            "isBuildCommand": true,
            "problemMatcher": [
                "$tsc"
            ]
        }
    ]
}

然后就是关键的launch.json了

// .vscode/task.json
{
    "type": "node",
    "request": "launch",
    "name": "启动程序",
    "program": "${workspaceRoot}/index.js",
    "env": {
        "NODE_ENV": "development"
    },
    "preLaunchTask": "build",
    "sourceMaps": true,
    "outFiles": [
        "${workspaceRoot}/build/**/*.js"
    ]
}

这里就没什么好解释了, preLaunchTask是对应tasks.json的taskName, “sourceMaps”是使用.map文件, “outFiles”是输出文件的位置, 就是上面的Gulp 的输出位置.

不过旧版的VS Code 是支持outDir的, 现在新版已经遗弃了它, 用了outFiles去代替它.

After

好了, 现在的目录结构是这样子

/
  |- .vscode/
  |  |- launch.json
  |  |- tasks.json
  |
  |- build/
  |  |- index.js
  |  |- index.js.map
  |  |- ...
  |
  |- src/
  |  |- index.ts
  |  |- ...
  |
  |- index.js
  |- gulpfile.js
  |- package.json

现在就可以尽情在.ts文件中使用断点了.

4 End

2017-06-05

让旧JS 文件也支持TS 智能提示

0

最近用上Typescript, 顺势用上了VS Code. 鉴于TS的智能提示实在太好用了, 所以就开始思考怎样将这个功能引入到日常的维护及开发中.

1

为什么要先拿Newifi 开刀呢? 因为最近在弄Newifi OS4 的兼容和适配.

2

然而试验并不是很成功. 一开始考虑是按照常规js 转ts 的方式, 但并不可行, 一个是因为是试验, 一个是因为js 的混肴压缩是写在Makefile 文件, 在编译机不能为了这个去专门去加一个脚本作转换.

后来想想, 什么都不改不就好了嘛, 就得出现在的方案. 不过百度(X歌)一番之后, 发现做的人不多, 其实也是很正常的事. 现在的用上ts 的工程基本都是源码 => 编译构建(gulp/webpack) => 运行, 但我们是源码 => 打包(makefile), 加之makefile 是由编译Newifi OS 时触发的, 更加难以控制.

3

现在Newifi 使用的是旧jQuery 的继承形式, 用Class.extend({...})

// 声明
// api.js
Class.extend({
  setWanProto: function (proto) {
    // proto 可以使用的是'pppoe', 'dhcp', 'static'
    ...
  },
  ...
});
// 使用
// newifi.js
newifi.api.getWanProto('pppoe');

根据官方样例, 我们将文件写成:

// api.d.ts
declare namespace newifi {
  export interface api {
    getWanProto(proto: string): Promise
  };
};

但在newifi.js里输入newifi.后, 没有提示api. 嗯? 这是怎么回事呢? 啊, 可能我少了那///, 好吧, 我补回来.

1	/// <reference types="./api.d.ts" />

这样总得可以了吧, 好吧试一下, newifi., 嗯, 非常好, 有提示api, 好, 回车.

擦? 文件头部竟然自动出现var api = require('./api'), 哥, 你还好吗? 我这个项目都是es5, 你require 干什么呢!

难道?

其实VS Code是不支持的?

4

非也非也, 一脸茫然之后, 我将我自己的模块添加了.d.ts(文件地址), 然后在js 文件下, 可以正常弹出提示, 难道之前哪里错了?

可能是真的错了, 写JS 久了就把原本的知识扔掉了, 刚好翻了Kotlin的文档, 看回interface, 发觉, 我为什么要用interface 呢? 这不是多余操作吗? 直接上namespace 不久好了嘛! 嗯嗯, 的确, 我将interface 改成namespace 后就可以正常提示了, 估计一开始就写js 的人(泛指大部分培训班出来的), 完全不明这个什么和什么. interface 在OO中太普遍了, 但在JS中却是稀有物种.

5 完整写法

整合namespace, 和使用type aliase 后:

// api.js
Class.extend({
  setWanProto: function (proto) {
    // proto 可以使用的是'pppoe', 'dhcp', 'static'
    ...
  },
  ...
});
// api.d.ts
type ProtoValue = 'pppoe' | 'dhcp' | 'static';

declare namespace newifi.api {
  function getWanProto(proto: ProtoValue): Promise;
  ...
};

2016-06-28

Javascript

[Gulp游记]gulp-tap

gulp-tap

这个我不知道应该怎样说, 感觉平常的用法也不是什么正确用法…

用途一 debug

可以知道正在使用哪个文件, 平常最常用就是这个了.
因为不清楚有什么file通过了gulp.src, 用这个方法就一下子显示出来了

gulp.src("**")
    .pipe(gulpTap(function (file) {
        console.log(file.path);
    }));

用途二内容再分组

正在做的那个项目, 有很多的插件, 但格式都是统一的, 所以这个插件就可以更新一个cwd, 完成再分组.
一般我们都知道, 当进入通过gulp.src之后, cwd就不能再修改了, 但用了这个方法之后, 可以分别独立一个cwd, 不知这样好不好, 反正我觉得效果还行.

/**
 *
 * - src/plugins
 *   - plugin-0
 *   - plugin-1
 *   - plugin-2
 *   - …
 */
gulp.src("src/plugins/*")
    .pipe(gulpTap(function(file) {
        gulp.src(file.path + '/css/*')
            .pipe(…)
    }));

2016-05-06

Server

Automatically answer defaults when update config file

0

最近在弄持续构建的东西, 其中一项就是我们PadroaBox的编译. 但随着开发的推进, Config 文件一直在变, 导致各种警告, 例如

1
2

WARNING: No feed for package 'python-readline' found, maybe it's already part of the standard packages?
WARNING: No feed for package 'python-mini' found, maybe it's already part of the standard packages?

或者最常见的

1	WARNING: your configuration is out of sync. Please run make menuconfig, oldconfig or defconfig!

1

是的, 对这个挺头疼的, 因为是自动运行的, 不能想平常那样进入make menuconfig后Ctrl+C出来, G了一下, 更新Config 文件有三种方法:

make config
make menuconfig
make oldconfig

`make config`

这个其实是make menuconfig的文字版, 没什么区别

`make menuconfig`

这个就不说了, 常用常见

`make oldconfig`

这个没接触过, 貌似和我想要的功能差不多, 但需要不断的回车

回车?

2

需要回车的话, 可以用yes命令,

不过注意的是, 不能这样

1	yes \| make oldconfig

这样不断的空输入, 所以不行,

1 2	yes y\| make oldconfig yes n\| make oldconfig

Y和N 都不是好选择, 因为New的item不知道是不配置所需要, 然后我这样, 重复输入一个空字符串, 这样就会不断附带一个回车, 这样符合需要了

1	yes ""\| make oldconfig

4

2016-03-27

经验

Mac 下批量解压RAR

0

之前下了不少漫画, 不过都是.rar文件, 而且Keka解压不了他们, 无奈之下, 使用了大杀器unrar, 然而unrar不支持批量解压…
好吧, 既然不支持, 我写一个脚本去循环处理他们总得行了吧?

1

脚本写好了, 可以解压多个RAR了, 但每次只能解压几个, 如果要解压这么多文件(60+), 无用功太多, 加上程序猿的<惰性>, 我还是不干了.

3

为什么是3呢?

其实解压不是问题, 问题是以后也遇上这个问题怎么办呢?

甘好我在伯乐在线看到这篇文章, 安利一下, 用上了find的exec

最后这样写就可以批量来弄了.

1	find . -type f -name "*.rar" -exec unrar x -p扶她奶茶 -u {} \;

3-Fail

如果遇上no terminating ";" or "+", 那就重新看一下我行命令最后面的转移符吧~

2016-02-22

普通事

About Mhxy梦幻西游2 MAC版下载补丁失败解决办法

平台补丁下载失败

一句必胜用手机热点再运行一次吧~

卸载

本体位置 : /Users/<User>/Library/Application Support/MhxyForMac
启动器位置 : /Applications/梦幻西游启动器.app

E.g

1 2	rm -rf /Users/arylo/Library/Application\ Support/MhxyForMac sudo rm -rf /Applications/梦幻西游启动器.app

2016-01-06

Luci

API 测试

Front

最近Lafite Theme往1.0.0走去, 测试变得非常频繁, 更新一次, 基本都要重新测试, 虽然之前写了不少测试单元(用Phantom, 但因为各种各样的原因, 大部分的Unit都需要修改, 甚至完全失效. 关于这个, Kerwin基本崩溃状态, 之前不少Unit是他写的, 现在不行了, 重构的也是他…

And

还是那句, 触一发动全身. 接口这里的测试很多问题, 最大的问题是, 用原生Nodejs写的, 我自己做的轮子, 现在过了段时间, 反而不知道轮子怎样, 也促使我这次重构TestUnit之路.

Content

Thinking

鉴于之前是我自己做的轮子, 所以这次直接寻找成熟的插件来做这个事情. 在Theme 那边, Kerwin 用的是Karma+Jasmine(虽然是我安利的…, 经常漫长的狗哥(>30min), 最后选择了Mocha+Should+Supertest.

Preparation

Mocha

懒得介绍

Should

比较像自然语法, 所以选他

Mocha

比较简单, 所以挑它

Script

在使用之前, 先磨好工具, gulp+coffee, 因为对CoffeeScript 的好感, 所以这里也使用它

首先写好测试运行的Gulp Task.

gulp.task('test', ['test:mocha']);

gulp.task('test:mocha', function () {
	var testFilename = '*';

	if (args.u && args.u.length > 0) {
		testFilename = args.u;
	}

	return gulp.src('test/' + testFilename + '.spec.{js,coffee}', {
			read : false
		})
		.pipe($.if('*.coffee', $.coffee()))
		.pipe($.mocha({
			reporter : 'nyan',
			timeout  : 15000
		}))
});

gulp test一下, 就可以运行测试了, 单一测试也是可以的, eg.gulp test -u wan

然后可以开始动工了

Unit

supertest = require 'supertest'
should    = require 'should'

server    = supertest.agent "http://#{RouterUrl}/cgi-bin/luci"

describe 'Wan Test', () ->

	it 'Status', (done) ->
		server.get('/api/wan/status')
			.expect(200)
			.expect((res) ->
				# Expect Code
				# ...
			)
			.end(done)

	# Other Test
	# ...

Last

我只是简单记录一下我干了什么而已…

Get Start

Its Example

Other Example

And Me

Update at 2018-01-09

Generate Cover Reporter Fail

已经用过了的

博客类

构建工具

Grunt

Gulp

语言相关

CoffeeScript

TypeScript

基础加强集合

工具集

运行环境

服务器相关

数据库相关

页面端相关

图表

动画

AngularJS

Angular

客户端相关

命令行端相关

测试相关

调试相关

运维相关

日志相关

文档生成

别人推荐或收集回来的

页面端相关

Angular

测试相关

0 Introduction

1 ts-node 坑

2 Now

安装 cross-env

在package.json 追加命令

3 And

0 Introduction

1 Now

2 Found

3 Resolve

Before

After

4 End

0

1

2

3

4

5 完整写法

gulp-tap

用途一 debug

用途二 内容再分组

0

1

make config

make menuconfig

make oldconfig

2

4

0

1

3

3-Fail

平台补丁下载失败

卸载

Front

And

Content

Thinking

Preparation

Mocha

Should

Mocha

Script

Unit

用途二内容再分组

`make config`

`make menuconfig`

`make oldconfig`