Skip to content

Constructs

ICELI edited this page Jun 11, 2017 · 3 revisions

文件目录说明

index.html

  1. index.html - 为SPA唯一入口文件,百度统计脚本放于页面底部

server.js

  1. server.js - 用于查看build之后的代码(npm start 默认执行node server)

build/

  1. HashedModuleIdsPlugin.js - webpack2加入的,这里直接引入解决模块id不稳定的问题
  2. proxy.js - 根据config.dev.devServer参数生成完整代理配置
  3. vendor-manifest.json - dll插件根据依赖的模块所生成
  4. webpack.config.js - webpack通用配置项,根据开发、生产环境配置./config/build.config.js添加文件hash
  5. webpack-dev.js - 提供开发环境热更新服务,指定vendor模文件名为vendor.js,将不包含hash
  6. webpack-production.js - 生产环境打包,打包前删除dist目录,启用文件压缩混淆,未指定vendor模块文件名,将包含hash
  7. webpack.dll.conf.js - webpack 预打包配置,通过dll插件将基础依赖提前打包

config/

  1. address.config.js - 配置项目依赖服务器地址
  2. build.config.js
  • assetsPublicPath - 配置引用资源的位置,用于配置CDN地址,读取address.config.js配置项 CDN_ADDRESS
  • dev devServer - webpack热更新服务器配置,用于配置host访问地址,端口,服务接口反向代理(解决跨域问题)
  • build debug - 用于配置调试压缩后的代码,true为开启调试模式,浏览器开发工具可查看到未压缩代码
  • echarts enabled - 是否啓用echarts模塊
  1. jm.config.json - jm-cli配置文件,详情请查看jm-cli

dep/

项目依赖框架库 - 建议根据文件功能及来源分目录

  1. angular/ - angular.js v1.2.29 全家桶,已迁移至npm
  2. bootstrap/ - 默认依赖的ui-bootstrap组件库,需引入bootstrap.css ,由jmui自定义bootstrap样式替代
  3. ie8support/ - 兼容ie8浏览器ES5语法和H5特性,ie9的placeholder功能
  4. jmui/ - 自定义组件库
  5. lazy-image/ - 图片懒加载插件,已迁移至npm
  6. bindonce.js - 单次绑定插件,提升性能,已迁移至npm
  7. ng.element.js - angular.element方法扩展
  8. security.js - 前端加密算法库
  9. vendor/ - vendor.xxx.dll.js dll插件打包生成的文件,包含1、5、6
  10. angular-locale_zh-cn.js - angular国际化文件,暂时未找到npm包

dist/

  1. dist文件夹将放于CND服务器,所有引用dist目录下资源的地方,都需要可以动态配置域名:
    1.1. webpack设置publicPath打包时添加
    1.2. angular自定义filter - cdn, 给资源地址加CDN_ADDRESS前缀
  2. dist/img/sprite - 该文件夹为雪碧图合成临时文件夹,可以忽略。webpack在生产环境下会重新生成添加hash的图片
  3. dist/dep/ie8supports.js - 目前为卖塑郎项目打包后的文件,用于兼容ie8、9,比较固定一般不会更改。

doc/

  1. api.md - RESTful API设计规范的demo
  2. nginx.conf - nginx配置,用于在本地测试生产环境下代码
  3. server.js - Prerender.io的服务器配置,用于解决前台页面SEO的问题。注意单线程
  4. specification.md - 为angular项目规范

scripts/

存放ng-seed项目开发用脚本,对应package.json的scripts属性

  1. authors.js - 生成ng-seed项目开发人员
  2. gh-pages.js - 自动替换配置生成gh-pages所需路径网站,更新至github
  3. jsdoc.conf.json - jsdoc配置文件
  4. .tpl/ - page新页面的模板
  • tpl.controller.js
  • tpl.html
  • tpl.router.js

src/

注意一级子目录结构不可随意修改,二级子目录可根据项目复杂度设置多级目录

  1. app.js - 配置项目使用常量、页面路由 1.2 app.router.js - 页面路由配置
  2. main.js - 页面入口js文件,用于引入页面使用的样式,脚本
  3. asset/ - 存放css、img等静态资源
    3.1. css/ - 推荐使用sass来模块化css文件,css用到了postcss来实现雪碧图、autoprefixer兼容css3
    3.2. img/ - sprite 雪碧图目录,在此文件夹下的图片将合并,子目录会单独合并为一张图片
  4. component/ - 提取公用ng组件,方便后续代码维护与复用
  5. filter/ - 过滤器,处理数据格式
  6. layout/ - 页面布局公共指令
  7. mock/ - json文件
    7.1. 用于开发阶段模拟接口数据
    7.2. 在前端固定将来会开发成接口的数据
  8. page/ - 包含controllerroutertemplate
  9. service/ - 包含api接口服务、util工具函数、store数据单例、http拦截器
Clone this wiki locally