useful tools collection

最新推荐文章于 2024-10-01 22:49:57 发布

weixin_33711647

最新推荐文章于 2024-10-01 22:49:57 发布

阅读量80

点赞数

文章标签：测试 webpack json ViewUI

原文链接：https://my.oschina.net/wanjubang/blog/906625

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.正则表达式

可视化正则表达式解释 https://regexper.com/

2.shell

可视化shell https://explainshell.com/

3. 函数式编程

ramda是一个js实现的函数式编程库。我已经在我的项目中使用了它，当然lamda也可以充当这样的功能。这里提供了一个在线的函数式编程页面。

可以在左侧写代码。右侧看输出。跟codepen比较相似，但是一方面不用写依赖（引入ramdajs），一方面我们写函数式代码其实用不到界面，不是吗？

这对于你练习函数式编程很有帮助。

http://ramdajs.com/repl/?v=0.23.0

4.文档工具

一个是根据markdown生成网站的docsify。不限语言，你可以在项目中写README.md然后把它作为数据源给docsify，然后你的markdown就可以展示在网页上了。

https://docsify.js.org/#/

一个是根据段落注释（一些特定的tag）生成文档以及索引（用于搜索）

https://yuilibrary.com/

4. 测试工具

http://karma-runner.github.io/1.0/index.html

karma是一个完善的测试体系。可以支持多种浏览器，断言库，测试框架。最重要的是它支持热替换.

这让你在写代码时可以大胆的写了，前提是覆盖率足够（如果覆盖率低，会让你自己产生代码没问题的假象）

一个典型的karma配置文件：

// Karma configuration Generated on Wed Dec 28 2016 12:50:33 GMT+0800 (中国标准时间)
var webpack = require( 'webpack' );
var path = require( 'path' );
var nodemodulesPath = path.resolve( __dirname, 'node_modules' );

module.exports = function ( config ) {
	config.set({

		// base path that will be used to resolve all patterns (eg. files, exclude)
		basePath: '',

		// frameworks to use available frameworks:
		// https://npmjs.org/browse/keyword/karma-adapter
		frameworks: ['mocha'],

		// list of files / patterns to load in the browser
		files: ['test/**/*.spec.js'],

		// list of files to exclude
		exclude: [],

		preprocessors: {
			'test/**/*.spec.js': [ 'webpack' ]

		},

		reporters: [
			'progress', 'coverage'
		],

		// add
		coverageReporter: {
			type: 'html',
			dir: 'coverage/'

		},

		// web server port
		port: 9876,

		// enable / disable colors in the output (reporters and logs)
		colors: true,

		// level of logging possible values: config.LOG_DISABLE || config.LOG_ERROR ||
		// config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
		logLevel: config.LOG_INFO,

		// enable / disable watching file and executing tests whenever any file changes
		autoWatch: true,

		// start these browsers available browser launchers:
		// https://npmjs.org/browse/keyword/karma-launcher
		browsers: ['Chrome'],

		// Continuous Integration mode if true, Karma captures browsers, runs the tests
		// and exits
		singleRun: false,

		// Concurrency level how many browser should be started simultaneous
		concurrency: Infinity,
		// webpack
		webpack: {
			module: {
				loaders: [
					{
						test: /\.js$/,
						loader: 'babel',
						exclude: [nodemodulesPath],
						query: {
							presets: ['es2015'],
							plugins: [ 'istanbul', 'transform-object-rest-spread' ]

						}

					}, {
						test: /\.json$/,
						loader: 'json'

					}
				]

			}

		}

	})

}

同时packge中定义依赖

{
  "name": "xxx",
  "version": "1.0.0",
  "private": true,
  "entry": {},
  "dependencies": {
  },
  "devDependencies": {
    "babel-eslint": "^6.0.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-istanbul": "^3.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.8.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.6.1",
    "chai": "^4.0.0-canary.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-webpack": "^1.8.1",
    "mocha": "^3.2.0",
    "mocha-loader": "^1.0.0",
    "webpack": "^1.9.13",
    "webpack-dev-server": "^1.16.2"
  },
  "scripts": {
    "test": "karma start"
  },
}

6. 部署

一个超轻量的工具。可以配置一个json文件，一键部署代码，支持正则，配置足够灵活。而且还有进度条，哈哈~

https://github.com/azl397985856/deploy

一个典型的配置如下：

{
    "uatStepOne": {
        "host": "xx.xx.xx.xx",
        "username": "root",
        "port": "22",
        "password": "xxxxxxxxxxxxxx",
        "remoteDir": "/Data/deploy/xxxxx",
        "path": "\\.(js|json|css)$",
        "base": "./assets/"
    },
    "uatStepTwo": {
        "host": "xx.xx.xx.xx",
        "username": "root",
        "port": "22",
        "password": "xxxxxxxxxxxxxx",
        "remoteDir": "/Data/deploy/xxxxxx",
        "path": "index.*\\.html",
        "base": "./new_assets/html/"
    },
}