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
- 构建丨解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题
- 优化丨极致性能体验,前端性能优化,永无止境。
- 协作丨为团队提供愉悦的开发体验,提供前端开发脚手架的技术支持,专人维护解决脚手架问题
- 统一丨统一风格,统一代码规范,统一技术栈,减少代码冲突,并配套对应检测工具
- 效率丨让团队成员只需要简单培训学习使用这套框架,将精力主要放在业务需求开发上, 而不需要额外学习研究webpack,jsx,babel,node,shell,express等等一堆概念与知识
我们为不同的项目类型准备了不同的开发脚手架:
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 |
`` |
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 | 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 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
There are so many problems when we start a front-end project
- basic
- 监测处理所有的前端资源:html/css/js/img/file/url
- 打包 --打包合并,压缩混淆html,css,js
- 代码切割 --分离第三方包与业务逻辑代码
- css与js分离 (延迟加载css)
- 业务代码与公共第三方包分离
- 业务逻辑分离,根据需求切割代码,可以是路由变化、点击事件
- 第三方包分离,自定义分离,只引用第三方包中需要的模块
- 提取延迟加载模块中公共部分
- 环境分离 --production, development, test
- 支持单页面,多页面应用,混合应用
- 模板引擎 --html模板,动态生成页面
- 绝对路径 --简化import路径,
../../../a.js
,~/components/a.js
- 支持
markdown => html
, 使用 github-markdown-css - 代码高亮
- 图片压缩, 雪碧图, base64化
- 提高打包速度 重定向资源路径,不打包全部引用的资源,直接引用min文件,例:
react => react/react.min.js
- loader
- support js、jsx
- support ts
- css处理
- postCSS
- support sass, less
- 自动添加浏览器前缀 autoprefixer
- CSS Modules
- 删除 重复css class
- 语法检查
- development
- 自动打开默认浏览器
- 热替换 --不需要刷新页面,尤其连续改一个功能不需要重复做页面操作
- 自动刷新 --及时刷新页面
- 源码映射 --追踪错误代码到开发源码的错误一行
- 打包监测 --分析打包性能,模块内容
- 局域网访问 --开发环境允许局域网访问
- 重定向依赖 --使用第三方包提供的压缩包而不是通过webpack
- 兼容windows系统
- mock --mock
- 开发者面板:isMock, 切换api地址, 开发权限
- test
- .eslintrc, eslint
- .editconfig --统一编辑器格式,减少代码冲突
- production
- 版本号管理 --小版本携带版本号+时间戳,大版本使用版本号(字母) 一个版本目录下应包含所有文件
- 删除 调试信息 console.log
- 删除 未使用的函数 tree shaking
- 删除 if(false){代码块}
- 删除 仅用于开发环境的:
['react-hot-loader','react-hot-loader/patch', 'webpack-hot-middleware/client']
- 增加 浏览器前缀 --使用autoprefixer自动创建css的vendor prefixes
- 增加 作者信息
- 优化 首屏css内联 style-loader
- 兼容策略
- 浏览器兼容包含html、css、js等兼容问题,涉及广泛
- 兼容性检测
- html5shim
- css浏览器前缀
- javascript shim
- IE 系列兼容
- 加载策略
- 合理的加载策略能大大降低资源大小、提高用户体验、提高客户端安全性(根据后端验证返回前端业务逻辑)、提供渐进式服务
- 按需加载 在编译阶段,只打包需要的资源 (npm 各个包都有提供单独的es6模块,除非必须尽量不要引全部)
- 异步加载 lazyLoad, 根据路由,事件加载不同的资源
- 并线加载 根据浏览器特性,可以并线加载css、js等资源,同步执行
- 预先加载 根据用户,预先加载一些资源
- 缓存策略
- 合理的缓存策略能减少资源下载、保证用户每次获取的事最新的资源、提高用户体验
- 长久缓存 第三方的包、公用代码
- 及时更新 业务逻辑代码、常变动的css、js, 不需要强刷
- 加上资源版本号, 避免被盗链
- 安全策略
- XSS、CSRF、SQL注入、ddos、开启https 不讨论
- xss, 对用户输入进行过滤
- 压缩compression, 混淆obfuscation, 加密encryption 增加代码不可读性
- 哈希进行信息摘要
- 非对称加密
- 对称加密
- Salt
- cookie加密 md5加密token等信息
- others
- 编写shell脚本,制作命令行界面(CLI), 用于生成项目模板
- 自动化部署 -- 一键推送线上
- 定制化主题
- 发布到Npm, Bower
目前,还有一些新功能及bug需要解决,详见问题列列表
Name | Usage | Note |
---|---|---|
babel | ||
[express] | service | [Express 中文文档][express-cn] |
[echarts][echarts] | 图表库 | 数据可视化、开放、大气 |
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 |