{"id":15043451,"url":"https://github.com/ximalayacloud/award","last_synced_at":"2025-03-17T10:07:50.974Z","repository":{"id":36932397,"uuid":"231063901","full_name":"XimalayaCloud/award","owner":"XimalayaCloud","description":"⚙基于react的服务端渲染框架","archived":false,"fork":false,"pushed_at":"2023-05-07T15:45:53.000Z","size":9344,"stargazers_count":101,"open_issues_count":7,"forks_count":18,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-13T08:04:22.280Z","etag":null,"topics":["award","babel","koa","nodejs","plugin","react","react-router","spa","ssr","webpack"],"latest_commit_sha":null,"homepage":"https://award.deno.dev","language":"TypeScript","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/XimalayaCloud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-31T09:29:45.000Z","updated_at":"2024-09-22T06:10:10.000Z","dependencies_parsed_at":"2024-06-18T22:36:51.508Z","dependency_job_id":"073d0b2c-43ad-4a30-b77f-099c6c62e8a8","html_url":"https://github.com/XimalayaCloud/award","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XimalayaCloud%2Faward","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XimalayaCloud%2Faward/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XimalayaCloud%2Faward/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XimalayaCloud%2Faward/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XimalayaCloud","download_url":"https://codeload.github.com/XimalayaCloud/award/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244014136,"owners_count":20383715,"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":["award","babel","koa","nodejs","plugin","react","react-router","spa","ssr","webpack"],"created_at":"2024-09-24T20:49:04.106Z","updated_at":"2025-03-17T10:07:50.912Z","avatar_url":"https://github.com/XimalayaCloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Award ∙ [![build](https://img.shields.io/circleci/build/github/XimalayaCloud/award/master.svg)](https://circleci.com/gh/XimalayaCloud/award)  [![coverage](https://img.shields.io/codecov/c/github/XimalayaCloud/award/master.svg)](https://codecov.io/github/XimalayaCloud/award?branch=master) [![version](https://img.shields.io/npm/v/award.svg)](https://www.npmjs.com/package/award) [![Gitter](https://badges.gitter.im/award-js/community.svg)](https://gitter.im/award-js/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge) [![mit](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/XimalayaCloud/award/blob/master/LICENSE) [![download](https://img.shields.io/npm/dm/award.svg)](https://www.npmjs.com/package/award)\n\n[![codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/awardhello-world-0y1fi?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n- **场景:** 基于react框架，支撑[大型内容网站](#faq)的服务端渲染或单页应用\n\n- **开箱即用:** 开发者只需要关注组件（react）和中间件（koa）的开发即可，其他就交给award处理吧\n\n- **插件:** 提供了丰富且强大的插件系统，让开发者可以自由的操作award执行的生命周期（服务端、客户端、编译等所有场景）\n\n- **参考学习:** 提供了[文档](http://ximalayacloud.github.io/award/docs/basic/intro/)和[视频](https://www.bilibili.com/video/av82146266)\n\n# feature\n\n- 无需任何配置，支持根据路由**按需加载**js和css资源\n\n- 无需任何配置，支持**CSS Modules**，代码如下示例，[了解更多](https://ximalayacloud.github.io/award/docs/basic/static)\n\n  ```jsx\n  import \"./test.scss\"\n  \n  // 直接如下所示写组件即可，不需要做任何处理，award自会帮你实现CSS Modules\n  \u003ch1 className=\"name\"\u003ehello world\u003c/h1\u003e\n  ```\n- 路由底层基于**react-router v5**，那么就可以根据其规则配置复杂的路由规则了，[了解更多](https://ximalayacloud.github.io/award/docs/router/intro)\n\n- 提供了路由切换的**生命周期**，[了解更多](https://ximalayacloud.github.io/award/docs/router/intro#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)\n\n- 服务端基于**koa2**运行，你可以自由的编写中间件，且支持中间件的热更新，无需重启或刷新服务，[了解更多](https://ximalayacloud.github.io/award/docs/basic/server#%E4%B8%AD%E9%97%B4%E4%BB%B6)\n\n- 支持使用TypeScript进行开发，[了解更多](https://ximalayacloud.github.io/award/docs/more/tools#%E6%8E%A5%E5%85%A5typescript)\n\n- 最佳实践，[喜马拉雅PC主站](https://www.ximalaya.com/)\n\n# Quick experience\n\n```bash\n# \"example\" is target dir\n$ npm init award example\n```\n\n# Example\n\n## Installation\n\n```bash\n$ yarn add award react react-dom\n$ yarn add award-scripts -D\n```\n## Create `index.js`\n\n```jsx\n// 根目录创建index.js\nimport { start } from 'award';\n\nfunction app() {\n  return \u003cdiv\u003eHello Award\u003c/div\u003e;\n}\n\nfunction error({ status }){\n  return \u003cdiv\u003eStatusCode {status}\u003c/div\u003e;\n}\n\nstart(app, error);\n```\n\n执行`yarn award dev`命令启动上面这个示例，服务端将返回`\u003cdiv\u003eHello Award\u003c/div\u003e`的文档内容\n\n如果上述示例在执行时出现了错误，那么将渲染`error组件`\n\n# FAQ\n\n\u003cdetails\u003e\n  \u003csummary\u003e目前有哪些项目在使用award呢，我可以放心使用么？\u003c/summary\u003e\n\n\u003e 💅喜马拉雅内部的服务端渲染项目都是使用award进行构建的，所以你不必担心框架的维护问题\n\n- [喜马拉雅主站](https://www.ximalaya.com/)\n\n- [喜马拉雅m站](https://m.ximalaya.com/)\n\n- [喜马拉雅国际站](https://www.himalaya.com/)\n\n- [喜马拉雅圈子](http://m.ximalaya.com/quanzi/9)\n\n- [喜马拉雅广告投放](http://yingxiao.ximalaya.com/)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eaward和next.js的区别是什么？\u003c/summary\u003e\n\n\u003e award和[next.js](https://github.com/zeit/next.js)都是一个基于react的服务端渲染框架，假设你已经了解next.js框架了，接下来我们来说明award和next.js的区别\n\n- 基于[react-router](https://github.com/ReactTraining/react-router)实现了[`award-router`](http://ximalayacloud.github.io/award/docs/router/intro/)，其提供了更精细化的路由控制\n  \n  - 比如你可以定义`path=\"/:id(\\\\d+)\"`来匹配全是数字的路由，对于强SEO需求的项目很有用处。请查看[react-router](https://github.com/ReactTraining/react-router)来了解path定义的规则\n\n  - 你可以使用`award-router`提供的[路由生命周期](http://ximalayacloud.github.io/award/docs/router/intro/#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)来精细化控制前端的每次路由切换。比如用户离开当前路由时，可以使用自定义弹窗组件来确认是否离开\n\n  - 支持自定义的嵌套路由，定义规则和`react-router`一致，使用上稍有差异，[点击查看](http://ximalayacloud.github.io/award/docs/router/nestedRoute/)\n\n  - 👓当然`next.js`关于路由的所有功能，我们也都是支持的\n\n- 关于 CSS-in-JS ，[可以点击了解更多](http://ximalayacloud.github.io/award/docs/basic/static/#%E6%A0%B7%E5%BC%8F)\n  \n  - 开发者只需要通过`import './style.scss'`的形式引用，即可实现 CSS-in-JS，且自动实现了样式scope和开发阶段的样式缓存\n  \n  - 无需任何配置，编译后即可将样式提取到css文件，且在生产环境运行时可以根据路由按需加载，包括服务端渲染直出时\n\n  - 👓`next.js`目前还需要一些配置来实现，要实现CSS Modules还需要手动处理，而award只需import导入样式即可\n\n- award提供了丰富且强大的插件系统，可以不断的给Award注入活力。`next.js`暂未表态其插件市场\n\n- 提出了运行包和工具包的思想，极大的减少了，在node环境运行时，所需安装依赖的体积。`next.js`不支持\n\n- award基于[koa](https://github.com/koajs/koa)，开发者可以通过写中间件自由扩展服务端能力\n\n  - 开发阶段，我们支持中间件的热更新功能\n\n  - 👓`next.js`需要自行通过`koa`或者`express`再次封装一下，才能方便的使用中间件\n\n- [更多功能，欢迎查看文档进行探索](http://ximalayacloud.github.io/award/docs/basic/intro/)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e当开发服务端渲染项目时，针对award和next.js，我该如何选择呢？\u003c/summary\u003e\n\n- 如果你的项目对SEO要求比较高，且是大型的服务端渲染项目，推荐使用`award`。其可以更好的帮你管理路由，管理中间件，管理样式的开发等\n\n- 如果项目不是那么大，对SEO的要求不是很苛刻，那还是推荐使用`next.js`吧\n\n- 两者各有优缺点，建议都使用下对比看看。整体的上手和学习成本，两者都差不多\n\n\u003c/details\u003e\n\n\n# Contributing\n\n我们的目的是继续增强和优化Award功能，为web应用开发提供更便捷的辅助手段。阅读以下内容来了解如何参与改进Award\n\n## [Contributing Guide](http://ximalayacloud.github.io/award/docs/more/CONTRIBUTING/)\n\n阅读我们提供的[贡献指南](http://ximalayacloud.github.io/award/docs/more/CONTRIBUTING/)来了解award的开发和发布流程\n\n## Testing\n\n你也可以通过运行测试脚本`yarn test:client`参与到award的开发中来\n\n## License\n\nAward is [MIT licensed](./LICENSE).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fximalayacloud%2Faward","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fximalayacloud%2Faward","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fximalayacloud%2Faward/lists"}