{"id":19059918,"url":"https://github.com/zhaozhuoboy/react-start","last_synced_at":"2025-04-24T06:46:31.158Z","repository":{"id":109829933,"uuid":"130192887","full_name":"zhaozhuoboy/react-start","owner":"zhaozhuoboy","description":"react+react-router+redux+webpack3.x 起步脚手架","archived":false,"fork":false,"pushed_at":"2018-07-03T07:11:38.000Z","size":136,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-30T07:51:16.824Z","etag":null,"topics":["react","react-router-v4","webpack3-tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhaozhuoboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-04-19T09:37:09.000Z","updated_at":"2018-11-28T07:13:19.000Z","dependencies_parsed_at":"2023-05-26T19:45:26.373Z","dependency_job_id":null,"html_url":"https://github.com/zhaozhuoboy/react-start","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaozhuoboy%2Freact-start","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaozhuoboy%2Freact-start/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaozhuoboy%2Freact-start/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhaozhuoboy%2Freact-start/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhaozhuoboy","download_url":"https://codeload.github.com/zhaozhuoboy/react-start/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250580710,"owners_count":21453531,"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-router-v4","webpack3-tutorial"],"created_at":"2024-11-09T00:12:08.555Z","updated_at":"2025-04-24T06:46:31.150Z","avatar_url":"https://github.com/zhaozhuoboy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 使用\n\n### dev\n\n``` shell\nnpm install\n\nnpm run dll\n\nnpm start\n```\n\n### build\n\n```shell\nnpm run build\n\n```\n\n\u003e 执行build的时候 如果根目录没有dll文件夹要先执行 `npm run dll` \n\n\n### 记录一下搭建中遇到的问题\n\n- [] 1、 webpack 4.X 好像还是有点问题的，百度了一下貌似webpack-dev-middleware 版本还没有兼容 命令行里会有 ` Tapable.plugin is deprecated. Use new API on `.hooks` instead` 提示，先记录一下，以后再整。先换成webpack3.X\n\n- [x] 2、 项目跑起来后控制台还有一个报错 `only one instance of babel-polyfill is allowed`\n\n 这个问题困扰了我很久，在入口文件中明明只require了一次 babel-polyfill 但是却总是报警告。在[stackoverflow](https://stackoverflow.com/questions/43902416/only-one-instance-of-babel-polyfill-is-allowed-error)上看到一个回复说可能是 `HtmlWebpackPlugin`这个插件的问题。`HtmlWebpackPlugin`会生成制定的html模板，然后将内存中的js动态插入到模板文件中， 突然想起来模板里我手动加了这么一句`\u003cscript src=\"/app.js\"\u003e\u003c/script\u003e`,赶紧查看一下源码，果然里边加载了两次 `app.js`\n\n ![image](https://user-images.githubusercontent.com/15223986/39112399-fa50a68c-470a-11e8-9170-02b2b2962672.png)\n\n- [x] 3、 热更新会刷新浏览器没有真正热模块更新 [参考](http://www.css88.com/doc/webpack/api/hot-module-replacement/)\n\n\u003e如果已经通过 HotModuleReplacementPlugin 启用了模块热替换(Hot Module Replacement)，则它的接口将被暴露在 module.hot 属性下面。\n\n在`index.js`文件中添加下面代码,当修改文件之后会局部热更新，浏览器不会刷新\n\n```js\nif (module.hot) {\n    module.hot.accept()\n}\n```\n\n- [x] 4、 HtmlWebpackPlugin插件，生成一个模板html文件到生产目录。\n\n``` js\nnew HtmlWebpackPlugin({\n            title: 'React-Starter',\n            template: path.resolve(__dirname, '../src/index.html'),\n            favicon: path.resolve(__dirname,'../src/favicon.ico'),//给网站加上小图标\n            minify: {\n                removeAttributeQuotes: true // 移除属性的引号\n            }\n        }),\n```\n在模板html中的title使用`HtmlWebpackPlugin`配置项中的title，在html中这样用 `\u003c%= htmlWebpackPlugin.options.title %\u003e`\n\n\n- [x] 5、最开始用webpack4的时候遇到第一个问题，就把webpack降级到3.8.1版本了，然后就会报下面的错误。\n![tim 20180420103018](https://user-images.githubusercontent.com/15223986/39027738-de813250-4485-11e8-9e1b-9b7234de30b4.jpg)\n\n查了官方的issue [#295](https://github.com/webpack/webpack-dev-middleware/issues/295)，最新的`webpack-dev-middleware`插件是要搭配webpack4.x使用的。然后降级`webpack-dev-middleware`问题解决。\n\n![image](https://user-images.githubusercontent.com/15223986/39027802-2d92c976-4486-11e8-9559-b539e6e40187.png)\n\n- [] 6、IE9中的问题\n\n ```js\n Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills\n ```\n\n 看官网的介绍需要引入 `import 'raf/polyfill';` [emmmmm,还是有警告]\n\n ![20180423151755](https://user-images.githubusercontent.com/15223986/39111968-9a9a88bc-4709-11e8-85e5-4d12fefa46ad.jpg)\n\n#### 懒加载 \n\n[参考](https://reacttraining.com/react-router/web/guides/code-splitting)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaozhuoboy%2Freact-start","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhaozhuoboy%2Freact-start","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhaozhuoboy%2Freact-start/lists"}