{"id":27158118,"url":"https://github.com/yhtml5/yhtml5-seed","last_synced_at":"2025-04-08T21:55:01.227Z","repository":{"id":145514719,"uuid":"62124829","full_name":"yhtml5/yhtml5-seed","owner":"yhtml5","description":"The web's scaffolding tool for modern webapps","archived":false,"fork":false,"pushed_at":"2023-11-23T14:00:08.000Z","size":22839,"stargazers_count":43,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T22:12:57.432Z","etag":null,"topics":["nodejs","react","webpack","yhtml5"],"latest_commit_sha":null,"homepage":"http://yhtml5.com/yhtml5-seed","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yhtml5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-06-28T08:44:21.000Z","updated_at":"2023-11-23T14:00:14.000Z","dependencies_parsed_at":"2023-05-20T03:56:49.303Z","dependency_job_id":null,"html_url":"https://github.com/yhtml5/yhtml5-seed","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhtml5%2Fyhtml5-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhtml5%2Fyhtml5-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhtml5%2Fyhtml5-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhtml5%2Fyhtml5-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhtml5","download_url":"https://codeload.github.com/yhtml5/yhtml5-seed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934789,"owners_count":21020725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","react","webpack","yhtml5"],"created_at":"2025-04-08T21:55:00.675Z","updated_at":"2025-04-08T21:55:01.219Z","avatar_url":"https://github.com/yhtml5.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## YHTML5-Seed\n\n![npm version] ![node version] ![Build Status] ![downloads total] ![author]\n\n### Introduction\n\nYHTML5-Seed scaffolds out a new application. We can building a SPA or MPA.\nwriting your build configuration, and package manager dependencies (e.g npm) that you might need for your build\n\nThis is not only a project-seed for front-end. It is a complete set of solutions from the client to the server:\nreact,redux,webpack,web security,nodejs,express,api,git version,performance optimization\nwhat you want technology stack all in one, and provides many out-of-the-box features\n\nYHTML5-Seed 还提供了相应的加载策略, 缓存策略, 兼容策略, 安全策略. 更好的为业务服务, 创造商业价值\n\n前端世界的变化总是惊人的，在这个项目里，我们会及时更新依赖的技术到最新稳定版本，同时及时淘汰一些过时的技术元素\n我们不建议重度依赖别人发明的轮子，我们鼓励自己重复造轮子。在编码中了解底层原理，创造出更适合团队的解决方案\n\nWelcome to NEW front-end world and enjoy yourself\n\n**[Document][YHTML5-Seed-document]**\n**[Issue][YHTML5-Seed-issue]**\n\n### Target\n\n* 构建丨解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题\n* 优化丨极致性能体验，前端性能优化，永无止境。\n* 协作丨为团队提供愉悦的开发体验，提供前端开发脚手架的技术支持，专人维护解决脚手架问题\n* 统一丨统一风格，统一[代码规范][codeStandard]，统一技术栈，减少代码冲突,并配套对应检测工具\n* 效率丨让团队成员只需要简单培训学习使用这套框架，将精力主要放在业务需求开发上，\n  而不需要额外学习研究webpack，jsx，babel，node，shell,express等等一堆概念与知识\n\n### Apps\n\n我们为不同的项目类型准备了不同的开发脚手架：\n\nname|demo|path|document\n---|---|---|---\nreact-dashboard|react + redux + webpack2 + ant-design|`apps/react-dashboard`|`apps/react-dashboard/document/`\nMPA|--|`apps/mpa`|`apps/mpa/document/`\nfis3|fis3|`apps/fis3/`|``\nvue|vue|`apps/vue`|``\n\n### [YHTML5-CLI][YHTML5-ClI]\n\nA simple CLI for scaffolding front-end projects.  \n\n```\n npm i yhtml5-cli -g\n yhtml5 init \u003cproject-name\u003e\n\n # select template\n # waiting\n cd \u003cproject-name\u003e\n\n npm i \n npm run dev\n npm run build\n```\n\n### Command Line\n\n|Command line|Usage|\n|---|---|\n|npm start|install dependencies, and become building exmple program, please be patience|\n|npm run build|build production|\n|npm run build-debug|debug model|\n|npm run dev|develop model|\n|npm run test|test code|\n|npm run git|commit your code to git remote repertory|\n|npm i |`--registry=https://registry.npm.taobao.org`|\n\nFor detailed explanation on how things work, checkout the [YHTML5-Seed document][YHTML5-Seed-document]\n\n### Feature (webpack)\n\nThere are so many problems when we start a front-end project\n\n- [x] **basic**\n   - [x] 监测处理所有的前端资源：html/css/js/img/file/url\n   - [x] 打包 --打包合并，压缩混淆html,css,js\n   - [x] 代码切割 --分离第三方包与业务逻辑代码\n     - [x] css与js分离 (延迟加载css)\n     - [x] 业务代码与公共第三方包分离\n     - [x] 业务逻辑分离，根据需求切割代码，可以是[路由变化][react-router-code-splitting]、点击事件\n     - [x] 第三方包分离，自定义分离,只引用第三方包中需要的模块\n     - [x] [提取延迟加载模块中公共部分][move-common-modules-into-the-parent-chunk]\n   - [x] 环境分离 --production, development, test\n   - [x] 支持单页面，多页面应用，混合应用\n   - [x] 模板引擎 --html模板，动态生成页面\n   - [x] 绝对路径  --简化import路径，`../../../a.js`, `~/components/a.js`\n   - [x] 支持 `markdown =\u003e html`, 使用 github-markdown-css\n   - [ ] 代码高亮\n   - [x] 图片压缩, 雪碧图, base64化\n   - [ ] 提高打包速度 重定向资源路径，不打包全部引用的资源，直接引用min文件，例：`react =\u003e react/react.min.js`\n   - [ ] loader \n     - [x] support js、jsx\n     - [ ] support ts\n   - [x] css处理\n     - [x] [postCSS][postCSS]\n     - [ ] support sass, less\n     - [x] 自动添加浏览器前缀 autoprefixer  \n     - [x] [CSS Modules][css-modules]\n     - [ ] 删除 重复css class\n     - [ ] 语法检查\n- [x] **development**\n   - [x] 自动打开默认浏览器\n   - [x] 热替换 --不需要刷新页面，尤其连续改一个功能不需要重复做页面操作\n   - [x] 自动刷新 --及时刷新页面\n   - [x] 源码映射 --追踪错误代码到开发源码的错误一行\n   - [x] 打包监测 --分析打包性能，模块内容\n   - [x] 局域网访问  --开发环境允许局域网访问\n   - [x] 重定向依赖 --使用第三方包提供的压缩包而不是通过webpack\n   - [x] 兼容windows系统\n   - [ ] mock  --mock \n   - [ ] 开发者面板：isMock, 切换api地址, 开发权限\n- [ ] **test**\n   - [ ] .eslintrc, eslint\n   - [x] .editconfig --统一编辑器格式，减少代码冲突\n- [ ] **production**\n   - [x] 版本号管理 --小版本携带版本号+时间戳，大版本使用版本号(字母) 一个版本目录下应包含所有文件\n   - [x] 删除 调试信息  console.log\n   - [x] 删除 未使用的函数 tree shaking\n   - [x] 删除 if(false){代码块}\n   - [x] 删除 仅用于开发环境的：`['react-hot-loader','react-hot-loader/patch', 'webpack-hot-middleware/client']`\n   - [x] 增加 浏览器前缀 --使用autoprefixer自动创建css的vendor prefixes\n   - [x] 增加 作者信息\n   - [ ] 优化 首屏css内联 style-loader\n   - [ ] 兼容策略\n      - [ ] 浏览器兼容包含html、css、js等兼容问题，涉及广泛\n      - [ ] 兼容性检测\n      - [ ] html5shim \n      - [ ] css浏览器前缀\n      - [ ] javascript shim\n      - [ ] IE 系列兼容\n   - [ ] 加载策略\n      - [x] 合理的加载策略能大大降低资源大小、提高用户体验、提高客户端安全性(根据后端验证返回前端业务逻辑)、提供渐进式服务\n      - [x] 按需加载 在编译阶段，只打包需要的资源 (npm 各个包都有提供单独的es6模块，除非必须尽量不要引全部)\n      - [x] 异步加载 lazyLoad, 根据路由，事件加载不同的资源   \n      - [x] 并线加载 根据浏览器特性，可以并线加载css、js等资源，同步执行 \n      - [ ] 预先加载 根据用户，预先加载一些资源\n   - [ ] 缓存策略\n      - [x] 合理的缓存策略能减少资源下载、保证用户每次获取的事最新的资源、提高用户体验\n      - [x] 长久缓存 第三方的包、公用代码\n      - [x] 及时更新 业务逻辑代码、常变动的css、js, 不需要强刷  \n      - [x] 加上资源版本号, 避免被盗链\n   - [ ] 安全策略    \n      - [x] XSS、CSRF、SQL注入、ddos、开启https 不讨论\n      - [x] [xss][js-xss], 对用户输入进行过滤\n      - [x] 压缩compression, 混淆obfuscation, 加密encryption 增加代码不可读性\n      - [ ] 哈希进行信息摘要\n      - [ ] 非对称加密\n      - [ ] 对称加密\n      - [ ] Salt\n      - [ ] cookie加密 md5加密token等信息\n- [ ] **others**\n   - [x] 编写shell脚本，制作命令行界面（CLI）, 用于生成项目模板\n   - [ ] 自动化部署  -- 一键推送线上\n   - [ ] 定制化主题\n   - [ ] 发布到Npm, Bower\n\n目前，还有一些新功能及bug需要解决，详见[问题列列表][YHTML5-Seed-issue]\n\n\n### Technology Stacks\n\n#### The web's scaffolding tool for build modern webapps\n\nName|Usage|Note\n---|---|---\nbabel|||\n[express]|service|[Express 中文文档][express-cn]\n[echarts][echarts]|图表库|数据可视化、开放、大气|`http://echarts.baidu.com/echarts2/doc/slide/whyEcharts.html`\nreact||\nredux||\n[Eslint][eslint]||\n[NodeJS][node]||\nNormalize.css|重置浏览器css样式| \n[NPM][npm]||\nPM2||\npostCSS||\nwebpack|构建工具|\nshelljs|Portable Unix shell commands for Node.js`https://github.com/shelljs/shelljs`\nora|Elegant terminal spinner |`https://github.com/sindresorhus/ora`\nopn|open browser\n\n\n\n[author]:https://img.shields.io/badge/author-yhtml5-blue.svg\n[Build Status]:https://img.shields.io/travis/twbs/bootstrap/master.svg\n[downloads total]:https://img.shields.io/github/downloads/atom/atom/total.svg\n[npm version]:https://img.shields.io/npm/v/npm.svg\n[node version]:https://img.shields.io/badge/node-v4.3.2-blue.svg\n\n[bower]: http://bower.io\n[es5-shim]:https://github.com/es-shims/es5-shim\n[eslint]:http://eslint.org/\n[git]: http://git-scm.com/\n[http-server]: https://github.com/nodeapps/http-server\n[html5shiv]:https://github.com/aFarkas/html5shiv\n[iconfont-ali]:http://www.iconfont.cn/\n[jasmine]: http://jasmine.github.io\n[karma]: http://karma-runner.github.io\n[modernizr]:https://github.com/Modernizr/Modernizr\n[npm]: https://www.npmjs.org/\n[node]: http://nodejs.org\n[protractor]: https://github.com/angular/protractor\n[travis]: https://travis-ci.org/\n[react-router-code-splitting]:https://reacttraining.com/react-router/web/guides/code-splitting\n[codeStandard]:https://github.com/yhtml5/YHTML5-Seed/blob/master/codeStandard\n[document]:https://github.com/yhtml5/YHTML5-Seed/blob/master/README_EN.md\n[issue]:https://github.com/yhtml5/YHTML5-Seed/blob/master/issue.md\n[progress]:https://github.com/yhtml5/YHTML5-Seed/blob/master/progress.md\n[problem]:https://github.com/yhtml5/FW-Dashboard/blob/master/question.md\n[YHTML5-ClI]:https://github.com/yhtml5/YHTML5-CLI\n[YHTML5-Seed]:https://github.com/yhtml5/YHTML5-Seed\n[YHTML5-Seed-document]:./document/README.md\n[YHTML5-Seed-issue]:./document/04-frequent-problems.md\n[YHTML5-Tutorial-Git]:https://github.com/yhtml5/YHTML5-Tutorial/tree/master/app/git\n\n[postCSS]:(https://github.com/postcss/postcss#usage)\n[css-modules]:(https://github.com/css-modules/css-modules)\n[move-common-modules-into-the-parent-chunk]:https://webpack.js.org/plugins/commons-chunk-plugin/#move-common-modules-into-the-parent-chunk\n[js-xss]:http://jsxss.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhtml5%2Fyhtml5-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhtml5%2Fyhtml5-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhtml5%2Fyhtml5-seed/lists"}