node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

wag-cli

wag-cli

基于webpack多页面打包工具,主要针对vue,react项目,支持css,stylus,less和sass/scss

Install

npm install -g wag-cli

Usage

wag [options] [value ...]

wag init projectName [--cover] [--react]
初始化一个项目,如果项目已经存在,可以添加--cover参数将其覆盖, 默认生成vue项目,使用--react参数生成react项目

项目目录
|-components 通用组件
|-pages 项目模块
    |-home 其中一个模块,模块必须有一个src目录
        |-src
|-test 测试
    |-unit 单元测试
|-wag.config.js/webpack.config.js wag配置文件


wag dev
在本地会持续编译并生成对应的文件,主要在联调时供后端人员访问
wag start
在本地会持续编译并打开浏览器,实现热加载和代理
wag build
上线发布
wag test [参数同karma]
测试框架karma+mocha+chai
// wag.config.js配置文件详情
module.exports = {
 // 编译文件入口, 1:表示编译改模块,文件的入口取index得配置, 或者直接指定入口文件地址
   "files": {
     "pages/home/src/index.js": 1,
     "pages/post/src/index.js": "pages/post/src/index.html"
   },
   // 也可以直接用数组
   "files": ["pages/home/src/index.js"],
   // 或者指定模板文件
   "files": [
     "pages/home/src/index.js",
     ["pages/post/src/index.js", "pages/post/src/index.html"]
   ],
 // 对于node_modules下的js是否排除
 "exclude": true,
 
 /**  生产配置  **/
 // 提取js模块
 "vendor": true,
 // 生成文件的hash值,默认不生成
 "chunkhash": 8,
 // 是否提取css,默认不提取
 "extractCSS": true,
 // 是否生成source-map, 默认不生成
 "devtool": "#source-map",
 // 线上访问地址,默认//static.wuage.com/项目目录
 "publicPath": "/",
 // 分析块之间的依赖
 "bundleAnalyzerReport": true,
 
 /**  开发配置  **/
 // 上下文,默认当前目录
 "context": __dirname,
 // 入口文件
 "index": "pages/home/index.html",
 // 端口默认8080
 "port": 8080,
 // 自动打开浏览器
 "autoOpenBrowser": true,
 // api
 "proxyTable": {
   '/api': {
     target: 'http://127.0.0.1:3000',
     changeOrigin: true
   }
 },
 // 添加mock,key:请求路径,value:文件地址
 // 文件可以导出一个module.exports=函数,或module.exports=app=express(),或module.exports=app=new Koa()对象作为一个express的中间件
 "mockTable": {
    '/api': 'mocks/home.js'
 },
 
 /** 测试配置 */
 // 目前测试只支持Vue,针对React的测试可以使用Jest自己配置
 // 是否展示测试覆盖率,默认false
 coverage: true
} 

Commands

init [projectName]  初始化项目
dev                 开发
build               发布上线
start               开发自动启动服务
test [参数同karma]   测试
help [cmd]          display help for [cmd]

Options

-h, --help     output usage information
-V, --version  output the version number
-c, --cover    如果工程名存在,就覆盖掉
-r, --remove   build之前将dist目录删掉

其他

在测试时使用PhantomJS,但安装经常失败,在package.json依赖中去掉了,
需要手动安装karma-phantomjs-launcher和karma-phantomjs-shim
经常失败的包,手动安装
sass-loader
node-sass
less
less-loader