yhtml5-scripts v1.2.1

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

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

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

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