SkyFEnv(天眼前端开发环境套件)

安装

npm install -g skyfenv

关于源

• 下面的命令生成的脚手架环境均需要进行环境安装 npm install

关于本地开发

• 配置文件local.config.js
• 使用git或者其他代码管理方式都请忽略该文件

Front: 创建一个纯前端的项目

如何开始

• 安装成功之后, 进入你的工程目录, 创建一个文件夹(比如: client)存储你的前端开发环境
• 进入你创建的那个文件夹, 然后执行skyfenv front, 根据提示进行配置

如何进行自定义配置

• 配置文件: config.custom.js

• 参数说明:

  • esLint(Boolean): 是否开启JS代码检验, true 或 false
  • styleLint(Boolean): 是否开启样式代码校验, true 或 false
  • styleHash(Boolean): 是否开启CSS模块化, true 或 false
  • defineVars: 变量定义, 用于在编译环境中使用, 通过process.SkyEye.defineVars进行访问
  • entryArray(Array): 入口文件配置, [{name, router}, ...]
    • name(String): 入口文件名, 注意: 不需要文件后缀
    • router(String or Array): 页面路由, 参考express的路由配置 http://expressjs.com/en/4x/api.html#app, 注意: 如果使用了前端路由, 请保持路由一致
  • vendor(Array): 公共资源库, [lib1, lib2, ...], 注意: 必须是通过NPM安装的包
  • externals(Array): 外部资源库, [{package, var, path, chunk, CDN}, ...]
    • package(String): 包名称
    • var(String): 暴露全局的变量名
    • path(String): 路径
    • chunk(Array): 入口文件名, [name1, name2, ...]
    • CDN(Boolean): 是否是CDN资源, true 或 false
  • provide(Object): 变量提供, {变量名: 包名称}
  • assets(Object): 静态资源favicon和css, {favicon, css}
    • favicon(Array): favicon资源文件, [{path, chunk, CDN}]
      • path(String): 路径
      • chunk(Array): 入口文件名, [name1, name2, ...]
      • CDN(Boolean): 是否是CDN资源, true 或 false
    • css(Array): CSS资源文件, [{path, chunk, CDN}]
      • path(String): 路径
      • chunk(Array): 入口文件名, [name1, name2, ...]
      • CDN(Boolean): 是否是CDN资源, true 或 false
  • alias(Object): 资源路径重定向, {新路径名: 原始路径名}, 注意: 新路径名建议采用特殊的写法, 避免路径嵌套
  • devServer(Object): 开发服务器配置, {host, port, proxy}
    • host(String): IP或域名
    • port(Number): 端口号
    • proxy(Array or Function): 代理配置
      • Array: [{path, config}, ...]
        • path: 设置参考 http://expressjs.com/en/4x/api.html#app.use
        • config: 设置参考 https://www.npmjs.com/package/http-proxy-middleware
      • Function: 接受两个形参[server, proxyMiddleware]
        • server: 设置参考 http://expressjs.com/en/4x/api.html#app
        • proxyMiddleware: 设置参考 https://www.npmjs.com/package/http-proxy-middleware
  • buildDist(Object): pro编译输出文件相关路径配置, 请填写绝对路径
    • public(String): script src 或 link href 链接静态文件时路径前缀
    • bundle(String): entry产生的文件
    • template(String): html模板

• process.SkyEye说明

  • ENV(String): dev 或 pro
  • PACKAGE_JSON(Object): 环境根目录的package.json的值
  • defineVars: 在config.custom.js中定义的defineVars的值

• 模板变量说明

  • name: entryArray.name
  • router: entryArray.router
  • assets(Object): 资源信息
    • favicon(String): path
    • css(Array): [path1, paht2, ...]
    • externals(Array): [path1, paht2, ...]
    • webpack: 请参照根目录的webpack-assets.json

• 特性

  • webpack
    • loaders: vue-loader, less-loader, babel-loader, html-loader, url-loader等等
    • plugins: DeDupe, CommonsChunk, PostCSS
    • hot-reload
    • print the error message on page
  • vue, vuex
  • 开发模式下: 通过Node Server代理服务, 实现前后端开发隔离

如何运行

npm run dev

目录说明

|- assets               静态资源目录
|- build                webpack配置文件目录
|- plugins              非npm安装的第三方库或插件目录
|- src                  项目源代码目录
    |-  apps            App目录
    |-  commons         通用模块目录
    |-  components      组件目录
    |-  entry           入口文件目录, 请注意在配置入口时不要命名为`vendor`, 因为`vendor`已经作为多入口时公共Chunk的名称 !!!
    |-  vuex            vuex目录
|- views                模板文件目录
|- .babelrc             babel编译的配置文件 
|- .eslintrc            JS文件检查规范配置文件 具体规则请看 http://eslint.cn/docs/rules/
|- .stylelintrc         样式文件检查规范配置文件 具体规则请看 http://stylelint.io/user-guide/rules/
|- gulpfile.js          gulp配置文件
|- package.json         npm包信息
|- webpack-assets.json  webpack编译产生的bundle信息

更多命令请看README.md

Web: 创建一个Node Web(前后端)的开发环境

如何开始

• 安装成功之后, 创建一个文件夹(比如: testWeb)存储你的库开发环境
• 进入你创建的那个文件夹, 然后执行skyfenv web, 根据提示进行配置

目录说明

|- build                    webpack配置文件目录
|- client                   可参考`Front`中的目录结构说明
|- public                   构建后的模板, 静态文件和资源文件目录
|- resource                 资源文件目录
|- src                      服务端源代码目录
    |-  bin                 启动目录
        |-  www.js          服务入口文件
    |-  commons             公用模块目录
        |-  createRoute.js  创建路由
        |-  session.js      会话处理
        |-  utils.js        公共函数集
    |-  database            数据库目录
        |-  mysql.js        mysql实例
        |-  seq.js          orm实例
    |-  model               模型目录
        |-  demo            示例程序
        |-  index.js        入口文件
        |-  Session.js      会话模型
    |-  routers             路由目录
        |-  demo            示例程序
        |-  index.js        入口文件
    |-  views               视图目录
        |-  index.js        入口文件
    |-  access.js           访问日志记录
    |-  app.js              App
    |-  config.js           配置
    |-  errorCode.js        错误码
|- apidoc.json          apidoc 配置文件
|- nodemon.json         nodemon 配置文件
|- PM2.json             pm2 配置文件
|- local.config.js      本地开发配置文件
|- online.config.js     上线部署配置文件

如何运行

• 请查看根目录README.md

使用 Router

• 参考src/routers/demo

使用 Mysql

• 参考src/routers/demo/demo-mysql.js mysql

使用 Sequelize (ORM)

• 参考src/model/demo/Person.js
• 参考src/routers/demo/demo-person.js Sequelize

注: 上线时请删除demo代码

Change Logs

• 1.0.2: 修复了worker loader配置错误的bug：babel!worker => worker!babel
• 1.0.1: 移除web下的resource目录
• 1.0.0: 固定package.json中依赖的版本号，移除了lib选项
• 0.2.9: 删除了web下routes/demo/demo-url.js
• 0.2.8: 修复了web下database/seq.js配置的bug；新增web和front的本地开发配置文件local.config.js，web的上线配置文件online.config.js
• 0.2.7: 修复了webseq配置错误的bug
• 0.2.6: 取消了web默认需要配置数据库的限制
• 0.2.5: 删除web下的config.custom.js
• 0.2.4: 增加关于源的说明
• 0.2.3: 修复了web下"vue-resource"模块不存在的bug
• 0.2.2: 更正Readme文档
• 0.2.1: 修复了windows下获取当前路径名的bug
• 0.2.0: 重构了front和lib, server更名为web且增加了前端部分
• 0.1.1: 统一action.front'和action.lib的startBanner函数
• 0.1.0: 增加action.lib下npm run lib操作时生成当前版本tar包
• 0.0.9: 修复在 windows 下使用 pm2 弹出多窗口问题
• 0.0.8: 修复执行指令集权限问题
• 0.0.7: 完成action.server
• 0.0.6: action.lib增加了pm2相关支持
• 0.0.5: 修复了build/utils模块里let语法错误的Bug
• 0.0.4:
  • 修复了Pro模式下配置less loader执行extractCSS.extract时参数未设置style-loader的Bug
  • 增加css模块化styleHash和变量定义defineVars选项
  • action.lib增加npm run lib命令将lib进行UMD打包
• 0.0.3: 完成action.lib
• 0.0.2: 增加devServer配置中的host选项, 修复了utils模块里let语法错误的Bug
• 0.0.1: 完成action.front