skyfenv
天眼前端开发环境套件
Last updated 8 months ago by huangxinxin .
ISC · Repository · Bugs · Original npm · Tarball
$ cnpm install skyfenv 
SYNC missed versions from official npm registry.

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

安装

npm install -g skyfenv

关于源

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

关于本地开发

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

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

如何开始

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

如何进行自定义配置

  • 配置文件: config.custom.js

  • 参数说明:

    • esLint(Boolean): 是否开启JS代码检验, truefalse
    • styleLint(Boolean): 是否开启样式代码校验, truefalse
    • styleHash(Boolean): 是否开启CSS模块化, truefalse
    • 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资源, truefalse
    • provide(Object): 变量提供, {变量名: 包名称}
    • assets(Object): 静态资源favicon和css, {favicon, css}
      • favicon(Array): favicon资源文件, [{path, chunk, CDN}]
        • path(String): 路径
        • chunk(Array): 入口文件名, [name1, name2, ...]
        • CDN(Boolean): 是否是CDN资源, truefalse
      • css(Array): CSS资源文件, [{path, chunk, CDN}]
        • path(String): 路径
        • chunk(Array): 入口文件名, [name1, name2, ...]
        • CDN(Boolean): 是否是CDN资源, truefalse
    • alias(Object): 资源路径重定向, {新路径名: 原始路径名}, 注意: 新路径名建议采用特殊的写法, 避免路径嵌套
    • devServer(Object): 开发服务器配置, {host, port, proxy}
    • buildDist(Object): pro编译输出文件相关路径配置, 请填写绝对路径
      • public(String): script src 或 link href 链接静态文件时路径前缀
      • bundle(String): entry产生的文件
      • template(String): html模板
  • process.SkyEye说明

    • ENV(String): devpro
    • 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: 删除了webroutes/demo/demo-url.js
  • 0.2.8: 修复了webdatabase/seq.js配置的bug;新增webfront的本地开发配置文件local.config.jsweb的上线配置文件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: 重构了frontlib, server更名为web且增加了前端部分
  • 0.1.1: 统一action.front'action.libstartBanner函数
  • 0.1.0: 增加action.libnpm 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
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (9)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |