generator-java-webapp 
快速构建 java web 项目的前端脚手架（bootstrap+seajs+fed）
构建成功后的工程目录结构说明：
|- fed/ #前端源文件
|- css #样式文件
|- font #字体
|- img #图片
|- less # 存放less文件
|- js #脚本文件，存放所有js文件
|- app #seajs模块化文件
|- sea-config.js #seajs配置文件
|- mov #视频，音频文件
|- mock #mock文件
|- node_modules
|- sea-modules
|- fed.json #fed 配置文件
|- Gruntfile.js
|- .jshintrc
|- .editorconfig
|- package.json
|- README.md
|- dist/ #部署文件
|- test/ #单元测试
|- doc/ #文档
|- WEB-INF/ #java 模板文件
Usage
安装 generator-java-webapp:
npm install -g generator-java-webapp
创建一个 java web 项目目录，cd到目录下:
mkdir my-new-project && cd $_
运行 yo java-webapp，可选择性的输入你的工程名，如无输入即你的工程目录名
yo java-webapp [app-name]
Generators
可用的生成器：
- java-webapp(aka java-webapp:app)
- java-webpp:page
- java-webapp:mock
- java-webapp:fed
- java-webapp:js
- java-webapp:ftl
java-webapp
按 java web 的目录规范，创建前端工程目录文件
举例：
yo java-webapp
page
自定义一个业务模块，最终生成3个文件, 用”/“，生成带目录的文件
举例：
yo java-webapp:page myapp/login
生成 src/app/myapp/login/main.js
define(function(require, exports, module) {
//code
});
生成 src/app/myapp/login/package.json
{
"family": "app",
"name": "login",
"version": "0.0.0",
"spm": {
"alias": {
},
"output": ["main.js"]
}
}
生成 WEB-INF/template/ftl/myapp/login/index.ftl
<#import '/WEB-INF/template/ftl/inc/inc.ftl' as inc />
<@inc.header '页面标题'>
</@inc.header>
<@inc.body '页面菜单名'>
<p>这是页面内容</p>
</@inc.body>
<@inc.footer>
<script type="text/javascript">
seajs.use('${jsRoot}/app/myapp/login/main.js');
</script>
</@inc.footer>
Mock
创建 mock 文件，采用 fed 模拟的接口数据文件
举例：
yo java-webapp:mock mypage
生成 mock/mypage.js
var common = require('./common');
var store = common.store;
var getFile = common.getFile;
module.exports = {
// mock 请求
"post /url": function(req, res) {
res.send({
"result": "success",
"messages": [],
"fieldErrors": {},
"errors": [],
"data": {
}
});
},
// mock freeMarker 文件
"get /url": function(req, res) {
this.render.ftl(getFile('path'), store);
}
};
fed
创建一个 fed 配置文件
举例：
yo java-webapp:fed config
生成 config.json
{
"server": {
"port": "8080",
"path": {
"view": "",
"mock": "mock",
"public": ""
},
"globals": {
"baseUrl": "",
"basePath": ""
}
},
"coffeescript": {
"debug": false
}
}
js
创建一个 js 文件
举例：
yo java-webapp:js myapp
生成 myapp.js
define(function(require, exports, module) {
var $ = require('$');
});
ftl
创建一个 ftl 文件
举例：
yo java-webapp:ftl myapp
生成 myapp/index.ftl
<#import '/WEB-INF/template/ftl/inc/inc.ftl' as inc />
<@inc.header '页面标题'>
</@inc.header>
<@inc.body ''>
<p>这是页面内容</p>
</@inc.body>
<@inc.footer>
</@inc.footer>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent