{"id":18052862,"url":"https://github.com/minooo/webpack-es6-react","last_synced_at":"2025-04-10T19:42:25.149Z","repository":{"id":87399316,"uuid":"53399398","full_name":"minooo/webpack-es6-react","owner":"minooo","description":"一个基础的，综合了webpack，es6，react的学习模板。","archived":false,"fork":false,"pushed_at":"2016-07-25T11:35:07.000Z","size":11,"stargazers_count":22,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T17:21:18.937Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/minooo.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":"2016-03-08T09:24:46.000Z","updated_at":"2022-09-30T02:15:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"fcf834a7-340f-462a-8467-bc4f80f63782","html_url":"https://github.com/minooo/webpack-es6-react","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/minooo%2Fwebpack-es6-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2Fwebpack-es6-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2Fwebpack-es6-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2Fwebpack-es6-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minooo","download_url":"https://codeload.github.com/minooo/webpack-es6-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281418,"owners_count":21077423,"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":[],"created_at":"2024-10-30T23:13:24.686Z","updated_at":"2025-04-10T19:42:25.132Z","avatar_url":"https://github.com/minooo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 本项目已作废，替代项目为 [React-Study](https://github.com/minooo/React-Study)，欢迎交流学习。\n这是一个基础的，综合了webpack，es6，react的学习模板。\n\u003e \n\u003e 本模板也方便你对 react 生态圈中其他相关知识的学习，比如你想学习 `react-router`,`redux` 或是 `css-modules`都可以以此模板为基础进行延伸学习。甚至，你可以单纯的来学习es6!\n\n# webpack-es6-react\n本模板应用了以下技术\n\n- [React](https://github.com/facebook/react)\n- [Babel 6](http://babeljs.io/)\n- [Webpack](http://webpack.github.io/) 我们的构建工具\n- [Webpack Dev Server](http://webpack.github.io/docs/webpack-dev-server.html)\n- [React Transform](https://github.com/gaearon/react-transform-hmr) 可以让 React 组件局部自动实时更新（而不是刷新页面）\n\n## Demo\n\n![react-transform-boilerplate](https://raw.githubusercontent.com/minooo/test/master/demo.gif)\n\n## 使用方法\n```\ngit clone https://github.com/minooo/webpack-es6-react.git\ncd webpack-es6-react \nnpm install\nnpm start\n打开 http://localhost:5000/\n```\n\n\u003e 注意：package.json 的 scripts 中内置了三个命令\n\u003e - `start` 用于开发模式，方便调试，撸码。\n\u003e - `build` 开发完毕后，就可以打包文件了。\n\u003e - `lint` 检测你的js代码是否规范。\n\n\n## package.json 中的 包/库 部分说明\n- `babel-core` babel6 的基础模块\n- `babel-eslint` [ESLint](https://github.com/eslint/eslint) 是前端JS代码检测利器。而 [babel-eslint](http://npm.taobao.org/package/babel-eslint) 则允许你检测所有的 Babel 代码。\n- `babel-loader` 这个包允许你使用 Babel 和 webpack 转译（Transpiling） JavaScript 文件。\n- `babel-plugin-react-transform` 这个插件通过任意转换的方式去封装 React 组件。换句话说，你可以随心所欲的摆弄你的组件了。\n- `babel-plugin-transform-runtime` 在 Babel 转换过程中，详细的展示引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局。\n- `babel-preset-es2015` 此预设包含了所有的 es2015 插件。\n- `babel-preset-react` 此预设包含了所有的 React 插件。\n- `babel-preset-stage-0` 此预设包含了 stage 0 中的所有插件。\n- `eslint` JavaScript 语法检测利器：分析出你代码潜在的错误和非标准用法。\n- `eslint-plugin-react`  ESLint 中关于 React 语法检测的插件。\n- `react-transform-hmr` 一个 React 转换装置，该装置通过引用 Hot Module Replacement API 使热重载 React 的类成为可能。\n- `react-transform-catch-errors` 呈现你 React 组件的错误信息。\n- `webpack-dev-server` 为 wepack app 提供一个服务器，如果你的代码有任何变化，浏览器将自动刷新显示，极大的方便前期开发。\n- `babel-runtime` Babel 自带的运行环境。\n\n## 根目录下文件部分说明\n- `.babelrc` : 什么是 `.babelrc` 文件呢？熟悉 linux 的同学一定知道，rc 结尾的文件通常代表运行时自动加载的文件，配置等。同样在这里也是有同样作用的。里面的 `env` 字段，可以对 BABEL_ENV 或 NODE_ENV 指定不同的环境变量，进行不同编译。\n- `eslintignore` 通知 `eslint` 忽略那些不应该被检测的文件。\n- `eslintrc` eslint 配置文件，使 JavaScript 代码规范化，标准化书写。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminooo%2Fwebpack-es6-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminooo%2Fwebpack-es6-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminooo%2Fwebpack-es6-react/lists"}