YHTML5-Seed

Introduction

YHTML5-Seed scaffolds out a new application. We can building a SPA or MPA. writing your build configuration, and package manager dependencies (e.g npm) that you might need for your build

This is not only a project-seed for front-end. It is a complete set of solutions from the client to the server: react,redux,webpack,web security,nodejs,express,api,git version,performance optimization what you want technology stack all in one, and provides many out-of-the-box features

YHTML5-Seed 还提供了相应的加载策略, 缓存策略, 兼容策略, 安全策略. 更好的为业务服务, 创造商业价值

前端世界的变化总是惊人的，在这个项目里，我们会及时更新依赖的技术到最新稳定版本，同时及时淘汰一些过时的技术元素 我们不建议重度依赖别人发明的轮子，我们鼓励自己重复造轮子。在编码中了解底层原理，创造出更适合团队的解决方案

Welcome to NEW front-end world and enjoy yourself

Document Issue

参考

roadhog

Target

• 构建丨解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题
• 优化丨极致性能体验，前端性能优化，永无止境。
• 协作丨为团队提供愉悦的开发体验，提供前端开发脚手架的技术支持，专人维护解决脚手架问题
• 统一丨统一风格，统一代码规范，统一技术栈，减少代码冲突,并配套对应检测工具
• 效率丨让团队成员只需要简单培训学习使用这套框架，将精力主要放在业务需求开发上， 而不需要额外学习研究webpack，jsx，babel，node，shell,express等等一堆概念与知识

Apps

我们为不同的项目类型准备了不同的开发脚手架：

name|demo|path|document ---|---|---|--- react-dashboard|react + redux + webpack2 + ant-design|apps/react-dashboard|apps/react-dashboard/document/ MPA|--|apps/mpa|apps/mpa/document/ fis3|fis3|apps/fis3/| vue|vue|`apps/vue`|

YHTML5-CLI

A simple CLI for scaffolding front-end projects.

 npm i yhtml5-cli -g
 yhtml5 init <project-name>

 # select template
 # waiting
 cd <project-name>

 npm i 
 npm run dev
 npm run build

Command Line

|Command line|Usage| |---|---| |npm start|install dependencies, and become building exmple program, please be patience| |npm run build|build production| |npm run build-debug|debug model| |npm run dev|develop model| |npm run scripts:u|update scripts| |npm run test|test code| |npm run git|commit your code to git remote repertory| |npm i |--registry=https://registry.npm.taobao.org|

For detailed explanation on how things work, checkout the YHTML5-Seed document

Feature (webpack)

There are so many problems when we start a front-end project

• [x] basic
  • [x] 监测处理所有的前端资源：html/css/js/img/file/url
  • [x] 打包 --打包合并，压缩混淆html,css,js
  • [x] 代码切割 --分离第三方包与业务逻辑代码
    • [x] css与js分离 (延迟加载css)
    • [x] 业务代码与公共第三方包分离
    • [x] 业务逻辑分离，根据需求切割代码，可以是路由变化、点击事件
    • [x] 第三方包分离，自定义分离,只引用第三方包中需要的模块
    • [x] 提取延迟加载模块中公共部分
  • [x] 环境分离 --production, development, test
  • [x] 支持单页面，多页面应用，混合应用
  • [x] 模板引擎 --html模板，动态生成页面
  • [x] 绝对路径 --简化import路径，../../../a.js, ~/components/a.js
  • [x] 支持 markdown => html, 使用 github-markdown-css
  • [ ] 代码高亮
  • [x] 图片压缩, 雪碧图, base64化
  • [ ] 提高打包速度 重定向资源路径，不打包全部引用的资源，直接引用min文件，例：react => react/react.min.js
  • [ ] loader
    • [x] support js、jsx
    • [ ] support ts
  • [x] css处理
    • [x] postCSS
    • [ ] support sass, less
    • [x] 自动添加浏览器前缀 autoprefixer
    • [x] CSS Modules
    • [ ] 删除 重复css class
    • [ ] 语法检查
• [x] development
  • [x] 自动打开默认浏览器
  • [x] 热替换 --不需要刷新页面，尤其连续改一个功能不需要重复做页面操作
  • [x] 自动刷新 --及时刷新页面
  • [x] 源码映射 --追踪错误代码到开发源码的错误一行
  • [x] 打包监测 --分析打包性能，模块内容
  • [x] 局域网访问 --开发环境允许局域网访问
  • [x] 重定向依赖 --使用第三方包提供的压缩包而不是通过webpack
  • [x] 兼容windows系统
  • [ ] mock --mock
  • [ ] 开发者面板：isMock, 切换api地址, 开发权限
• [ ] test
  • [ ] .eslintrc, eslint
  • [x] .editconfig --统一编辑器格式，减少代码冲突
• [ ] production
  • [x] 版本号管理 --小版本携带版本号+时间戳，大版本使用版本号(字母) 一个版本目录下应包含所有文件
  • [x] 删除 调试信息 console.log
  • [x] 删除 未使用的函数 tree shaking
  • [x] 删除 if(false){代码块}
  • [x] 删除 仅用于开发环境的：['react-hot-loader','react-hot-loader/patch', 'webpack-hot-middleware/client']
  • [x] 增加 浏览器前缀 --使用autoprefixer自动创建css的vendor prefixes
  • [x] 增加 作者信息
  • [ ] 优化 首屏css内联 style-loader
  • [ ] 兼容策略
    • [ ] 浏览器兼容包含html、css、js等兼容问题，涉及广泛
    • [ ] 兼容性检测
    • [ ] html5shim
    • [ ] css浏览器前缀
    • [ ] javascript shim
    • [ ] IE 系列兼容
  • [ ] 加载策略
    • [x] 合理的加载策略能大大降低资源大小、提高用户体验、提高客户端安全性(根据后端验证返回前端业务逻辑)、提供渐进式服务
    • [x] 按需加载 在编译阶段，只打包需要的资源 (npm 各个包都有提供单独的es6模块，除非必须尽量不要引全部)
    • [x] 异步加载 lazyLoad, 根据路由，事件加载不同的资源
    • [x] 并线加载 根据浏览器特性，可以并线加载css、js等资源，同步执行
    • [ ] 预先加载 根据用户，预先加载一些资源
  • [ ] 缓存策略
    • [x] 合理的缓存策略能减少资源下载、保证用户每次获取的事最新的资源、提高用户体验
    • [x] 长久缓存 第三方的包、公用代码
    • [x] 及时更新 业务逻辑代码、常变动的css、js, 不需要强刷
    • [x] 加上资源版本号, 避免被盗链
  • [ ] 安全策略
    • [x] XSS、CSRF、SQL注入、ddos、开启https 不讨论
    • [x] xss, 对用户输入进行过滤
    • [x] 压缩compression, 混淆obfuscation, 加密encryption 增加代码不可读性
    • [ ] 哈希进行信息摘要
    • [ ] 非对称加密
    • [ ] 对称加密
    • [ ] Salt
    • [ ] cookie加密 md5加密token等信息
• [ ] others
  • [x] 编写shell脚本，制作命令行界面（CLI）, 用于生成项目模板
  • [ ] 自动化部署 -- 一键推送线上
  • [ ] 定制化主题
  • [ ] 发布到Npm, Bower

目前，还有一些新功能及bug需要解决，详见问题列列表

Technology Stacks

The web's scaffolding tool for build modern webapps

Name|Usage|Note ---|---|--- babel||| [express]|service|[Express 中文文档][express-cn] [echarts][echarts]|图表库|数据可视化、开放、大气|http://echarts.baidu.com/echarts2/doc/slide/whyEcharts.html react|| redux|| Eslint|| NodeJS|| Normalize.css|重置浏览器css样式| NPM|| PM2|| postCSS|| webpack|构建工具| shelljs|Portable Unix shell commands for Node.jshttps://github.com/shelljs/shelljs ora|Elegant terminal spinner |https://github.com/sindresorhus/ora opn|open browser