@wannasky/cli
脚手架工具,以后慢慢维护
wans server
-
wans server config.js
指定config.js配置文件启动,不指定调用根目录wans.config.js
-
wans server --help
查看配置帮助信息
wans jshint
-
wans jshint config.js
指定config.js配置文件启动,不指定调用根目录wans.config.js
-
wans jshint --help
查看配置帮助信息
wans compress
-
wans compress config.js
指定config.js配置文件启动,不指定调用根目录wans.config.js
-
wans compress --help
查看配置帮助信息
示例配置如下:
module.exports = {
//端口号
port: 8080,
//根目录
root: './public',
//jshint配置
jsHint: {
files: ['src/test/**/*.js', 'src/index.js'],
exclude: ['src/test/**/*.spec.js', 'src/test/**/*.min.js'],
options: {
eqeqeq: true
//...
}
},
//压缩相关配置
compress: {
src: './test/__test__/compress/src',
dist: './test/__test__/compress/dist',
files: ['**/*.js', '/**/*.css', '**/*.scss'],
exclude: ['/**/*.min.js', '/lib/**/*.js'],
framework: ['angular'],
filename: {
'css': '../css/[name].[ext]',
'js': '[name].min.[ext]'
}
},
//本地静态资源路径重定向
local: {
'^/test/': '../test/',
},
//代理设置
proxy: {
'^/5aV1bjqh_Q23odCf': 'https://ss0.bdstatic.com/',
'/api/test': {
target: 'https://test.dyn.com',
headers: {
host: 'aa.cc.com'
}
}
},
//路由设置
router: {
'/router/:id': {
get: (req, res, query, mock) => {
console.log('query', query);
res.json(mock(mock.object({
name: 'wannasky',
age: 25,
books: mock.array({
length: mock.random(5, 10),
item: mock.object({
title: mock.text('book-', mock.index),
isbn: mock.random(1000, 2000, true)
})
})
})))
}
},
'/wannasky/test': {
post: (req, res, query, mock) => {
console.log('query', query);
res.json({success: true})
}
}
},
//测试json目录
//当路由,代理,静态资源都获取不到时,再尝试获取.json后缀的文件
testJsonDir: './__test__/json'
}
代理数据保存并离线使用
通过配置 proxySave = true
并指定testJsonDir
。
module.exports = {
port: '8888',
root: './',
proxy: {
'/': { // 这里是把所有请求都走代理
target: 'https://xx.xxx.xx.xx'
}
},
proxySave: true, // 代理的数据保存本地
testJsonDir: '__test' // 代理数据保存的文件目录
}
通过以上配置会在__test目录下生成代理的文件及映射关系(manifest.json),然后通过配置 useManifest
来使用
module.exports = {
port: '8888',
root: './',
useManifest: true, // 使用manifest.json配置来完成代理
testJsonDir: '__test' // 代理数据保存的文件目录
}
options参数支持说明
{
css: {
// sourceMap: true //编译后的css所在目录
// souceMap: '../map' // 相对dist配置目录
},
compress: {
drop_console: false, //见 https://www.npmjs.com/package/uglify-js
}
}
local配置详情
默认会建立symbol link,可通过 #copy改变默认行为为复制,再通过#watch(依附于#copy)来进行文件双向变更检测 eg:
{
local: {
'web/test': 'E:\\repo\\test#copy', // 仅复制
'web/one': 'E:\\repo\\one#copy#watch' // 文件复制及文件双向监听
}
}
router配置详情
get或者post对应的方法参数有req, res, query, mock;其中 res包括如下方法:
-
res.json(value: {}) 用来返回json内容
-
res.renderUrl(url: string) 返回指定文件内容,Content-Type会根据文件后缀自动匹配
-
res.next() 当条件判断失败后,可以主动调用,可模拟 nginx $try_files, eg:
router: {
'/project/dist/module/': {
get: (req, res) => {
if(req.url === '/project/dist/module/' || !path.parse(req.url).ext) {
res.renderUrl('./project/dist/index.html')
} else {
res.next();
}
}
}
}