{"id":19974437,"url":"https://github.com/alanchenchen/react-template","last_synced_at":"2025-10-24T09:52:38.197Z","repository":{"id":85157214,"uuid":"114827935","full_name":"alanchenchen/react-template","owner":"alanchenchen","description":"A react template with webpack for building your react project","archived":false,"fork":false,"pushed_at":"2019-08-05T07:16:55.000Z","size":170,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-04T02:39:16.572Z","etag":null,"topics":["react","react-components","react-template","tempalte","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alanchenchen.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-20T01:20:47.000Z","updated_at":"2019-12-24T10:04:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"2558cd5d-b91a-4b2e-97f5-1563b50cffd5","html_url":"https://github.com/alanchenchen/react-template","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/alanchenchen/react-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Freact-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Freact-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Freact-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Freact-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanchenchen","download_url":"https://codeload.github.com/alanchenchen/react-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanchenchen%2Freact-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259582671,"owners_count":22880063,"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":["react","react-components","react-template","tempalte","webpack"],"created_at":"2024-11-13T03:15:01.520Z","updated_at":"2025-10-24T09:52:33.143Z","avatar_url":"https://github.com/alanchenchen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A react template with webpack for building your react SPA\n## 一款专门适配react开发的webpack模板\n\u003e Based on webpack (3.8.1), react-router-dom (4.3.1) and react (16.5.2)\n### 功能\n1. css，less，stylus解析编译，想要使用less或stylus，必须要自己手动npm安装对应的less或stylus。\n2. css内图片自动解析并添加hash缓存，字体图标也支持，但在引入阿里的iconfont必须要手动更iconfont.css内的路径为相对路径。\n3. jsx和ES6语法解析，自动识别jsx文件，并且支持ES6最新语法，支持stage3语法，例如async函数，也支持类的新属性和静态属性写法。\n4. 支持webpack动态导入，配合`import`语法和`react-loadable`实现异步组件。\n5. 开发模式支持devServer，默认端口为8080，config.js提供了很多可配置项。默认提供eval-source-map供调试。\n6. 开发模式支持`react-hotloader`热替换，已经在`App.jsx`配置好，代码修改不会重新刷新页面而是局部更改。\n7. 集成了react和react-rotuer-dom，并二次封装了原有的Route组件让嵌套路由配置更简单。并没有提供reduc或者mobx。\n8. 生产模式支持提取公共chunks打包，默认将开发代码和第三方库以及webpack运行的runtime文件分离。默认打包压缩混淆并提供source-map供调试。\n9. 模板默认设置打包文件所有资源为相对路径，这是为了避免放到服务器时文件不在根目录导致路径出错的问题。打包完后，你可以直接打开index.html访问。但是要注意如果项目里有路由，直接打开index.html可能页面空白。这是因为路由必须要放在服务器才生效，必须保证根路由打开index.html。为了避免这种问题，模板内置一个静态文件服务器，通过`npm run preview`调用。\n\n### Directory Tree\n```bash\n    ─src\n    │  ├─assets\n    │  ├─components\n    │  │  └─Hello\n    │  ├─router\n    │  └─views\n    │      └─Home\n    └─webpack.config\n```\n\u003e 强烈建议按照模板目录来进行开发，可以新增，不要删除\n\n* assets是资源，componets是组件，router是路由(已配置好)，views是页面级组件，static是静态资源(最终会复制一份到dist的static目录下)\n* 基于react-router-dom，模板对Route组件进行了封装，为了更简单实现多层嵌套路由，模仿vue-router的api\n* 模板提供了3个路径符号，`@ =\u003e src目录`， `components =\u003e src/components目录`， `views =\u003e src/views目录`，`static =\u003e static目录`\n\n### 使用\n1. 使用alan-cli安装，极为便捷，使用方法见[alan-cli](https://github.com/alanchenchen/alan-cli)**  \n2. npm install 安装所有开发依赖和打包依赖\n3. npm start 或者 npm run dev 启动开发环境\n4. npm run build 启动打包程序，默认会在项目根目录生产dist文件夹，index.html在dist根目录，其余静态资源放在static文件夹内\n5. npm run preview 启动一个静态文件服务器，默认以dist文件夹作为根目录，目的是为了测试打包后项目是否可以正常访问，只作为一种前端自测手段\n\n### 开发tips\n* SPA单页面应用大部分都是在开发组件和路由，本模板直接在App.jsx中最外层设置了根路由，新增页面只需要在router/routeConfig中添加路由参数即可\n* 模板中二次封装的路由组件为`RouterView`，该组件和`react-router-dom`原生组件不会冲突，如果你想快速配置嵌套路由，建议使用`RouterView`和配置文件，你也可以单独使用`react-router-dom`的`Route`组件\n* `RouterView`组件模仿vue-router的配置，routeConfig.jsx中的配置格式如下:\n```javascript\n    /*  routeConfig.jsx   */\n    export default [\n        {\n            path: '/',\n            exact: true,        // Route组件原生的props\n            strict: false,      // Route组件原生的props\n            sensitive: true,    // Route组件原生的props\n            component: Home\n        }\n        {\n            path: '/sub',       // 和'/'在同一级的均为根级路由，根级路由也是一层路由，在使用RouterView组件时，不需要传入match的props\n            component: Sub,\n            children: [         // 嵌套路由只需要在当前父级路由下新增children选项，在使用RouterView组件时，必须传入match的props\n                {\n                    path: 'hello', // 嵌套路由可以加'/'前缀或者不加，已做兼容处理\n                    component: Hello\n                },\n                {\n                    path: '/world',\n                    component: World,\n                    children: [   // RouterView组件支持多级嵌套，会自动找寻对应层级的路由参数\n                        {\n                            path: 'a',\n                            component: () =\u003e {\n                                return \u003ch3\u003ethis is world A\u003c/h3\u003e\n                            }\n                        },\n                        {\n                            path: 'b',\n                            component: () =\u003e {\n                                return \u003ch3\u003ethis is world B\u003c/h3\u003e\n                            }\n                        }\n                    ]\n                }\n            ]\n        }\n    ]\n\n    /* App.jsx  */\n    export default class App extends Component {\n        render() {\n            return (\n                \u003cdiv\u003e\n                    \u003ch1\u003ewelcome to react\u003c/h1\u003e\n                    \u003cRouterView /\u003e /* 在根路由的外层容器里引入该组件，可以不传任何props，默认加载所有一级路由 */\n                \u003c/div\u003e\n            )\n        }\n    }\n    /* Sub.jsx  */\n    export default class Sub extends Component {\n        constructor(props) {\n            super(props)\n        }\n        render() {\n            return (\n                \u003cdiv\u003e\n                    \u003ch1\u003ethis is Sub\u003c/h1\u003e\n                /* \n                   在嵌套路由的外层容器里引入该组件，必传match，this.props.match是Home的父级组件Route传入的值，具体见react-router-dom文档。\n                   默认加载当前match对应下的直接子路由 \n                */\n                    \u003cRouterView match={this.props.match} /\u003e \n                \u003c/div\u003e\n            )\n        }\n    }\n\n```\n\n### 注意事项\n* 模板支持less和stylus，但是必须要自己安装less或者stylus才有效，如果想使用sass，请自己在webpack.dev.js和webpack.prod.js内添加sass-loader\n* 模板并没有提供redux或mobx，请注意，redux或者mobx配置可能需要更改`react-loadable`或`react-hotloader`，以具体文档为主\n* `RouterView`只是为了方便，你可以选择不使用，直接不在具体组件内调用即可，只有调用，路由配置才会生效。你甚至可以和原有的`Route`,`Link`,`Switch`等组件混搭，`RouterView`并没有改变什么，所以你也可以在其子组件中通过this.props.match获取到路由信息\n* `npm run preview`只有在`npm run build`才有效，否则打开服务器页面为空白","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanchenchen%2Freact-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanchenchen%2Freact-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanchenchen%2Freact-template/lists"}