yhtml5-scripts

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

• 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需要解决，详见问题列列表

Technology Stacks

The web's scaffolding tool for build modern webapps

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