web-tools规范文档.docx

新web-tools规范文档beta
特性
1. 一套开发工具，多项目共用，亦可不共用
2. 编译目录与源码目录分离
3. 打包工具支持以下特性
· 代码打包功能
· 代码编译功能（es6/jsx/less/scss）
· 开发环境/生产环境标识
· Ftp上传
· 图像压缩以及小尺寸inline
4. 源码环境具备以下功能
· React及React chunk，CSS module支持
· ES6环境支持
· less/scss支持
命名规范
适用范围
描述
示例
所有的链接url，文件名称，样式/id名称，key值，cookie名称
以小写加分隔符命名
hello-world、icon-family、

所有的类
首字母大写骆峰法命名
文件名与主类名保持一致
Hello/HelloWord、Footer、User
所有的function以及类方法
以首字母小写骆峰法命名
helloWorld、getName
所有的常量
全大写加_下划线分隔
HELLO_WORLD
局部/全局变量名
一律小写加_下划线分隔
hello_world、index、vote_id
所有的字符串（不包含模版字符串），所有的json对象属性名称
都必须使用双引号。
参考package.json
settings.json等

{
“hello”：“world”
}
所有的url
全小写，无后缀必须以/结尾

安装方法
安装
1. 从代码仓库克隆代码git clone git:/xxxx
2. 安装相关插件 npm install
3. 将bin目录添加至环境变量
使用
1. 随便找一个目录，输入web-init project_name
2. 进入自动创建的目录内 cd project_name
3. 安装基础模块 npm install
4. 启动调试 web-server

注：若不共用同一套开发工具，直接在git目录进行build(node tools/web-build.js)操作亦可。
相关命令
命令
作用
web-init
自动创建一个包含基本示例的项目
web-server
对项目进行编码并开启调试（开发环境）
l build目录不会自动删除
l 会生成source-map
l 代码不压缩
l 图像不压缩
l 会启动watch、nodemon、browersync
web-build
对项目进行压缩编译打包（测试，预演，正式环境）
l 会删除build目录
l 不会生成source-map
l 代码会压缩
l 图像会压缩
l 编译完成即退出，不watch改动及启动服务
web-ftp
自动上传build目录至远程ftp server目录

目录和结构说明
源码与工具目录

编译后目录

由以下模块提供技术支持
工具集
名称
说明
git文档地址
webpack

gulp

gulp-plumber

gulp-if

gulp-htmlmin

gulp-nodemon

guid

assets-webpack-plugin

babel

pm2

react-css-modules

babel-preset-es2015

babel-preset-react

base64-loader

url-loader

css-loader

源码
名称
说明
git文档地址
express

ejs

react

react-router

log4js

redis

reset-css

request

node-rpc

xml2js

iconv-lite