摘要：和是该模版默认的代码风格，你也可以在中使用自己喜爱的代码风格。你也可以选择，这个是建立在页面里面的一个组件，你可以在代码里自定义你需要的。
react-webpack-boilerplate
FeaturesA SPA boilerplate with React, built with love.
React 15.4.2
Redux 3.6.0
react-redux 5.0.2, 用来绑定 React 和 Redux.
react-router 3.0.2, 当v4发布稳定版本时, 会进行相关的更新
JSX
ES6
webpack 2.2
Express, 测试服务器
Hot-Reload, 支持 React 和 Redux!
Proxy
Environmental value
ESlint, 使用 standard 和 standard-react 进行代码风格检查
redux-devtools, 对 store 进行更加友好的调试
Usage# 该模版依赖于 sao 模版系统，所以请先sao npm install -g sao # 下载模版 sao SidKwok/react-webpack-boilerplate new-project --install # 安装全部依赖 cd new-project npm install # 运行测试环境, 默认端口: 8080 npm run dev # 生产环境 npm run build # 检查文件代码风格 (如果有使用 eslint 的话) npm run lintDoc
该模版大部分参考了 vue-cli/webpack 的设计。 如果你对 vue-cli 很熟悉的话, 你应该会对该模版很快上手。如果想看模版的结构，可以直接在full-features分支查看。
Pre-Processor你可以使用 less, sass 或者 stylus 作为你的CSS预处理器，不过你首先得安装相关的依赖。举个?，假如你要使用 less：
npm install less less-loader --save-dev
然后，你就可以在你的组件里 import 你的 less 文件。
Proxy该模版使用 http-proxy-middleware 来代理接口.
举个?, 你想代理接口 /api/get-post 和 /api/get-id 到, 你可以在 config/index.js 中添加以下代码:
...
dev: {
proxyTable: {
"/api": {
target: "http://example.org",
changeOrigin: true
}
}
}
...
你便可以在测试服务器中使用你所代理的接口。在这里查看更多的选项。
Envvue-cli/webpack 的文档详细地介绍了环境变量地用法。
Hot-Reload该模版使用了react-hot-loader v3来对React的组件进行热更新，甚至支持Redux的热更新！希望你玩的开心。
ESlintstandard 和 standard-react 是该模版默认的代码风格，你也可以在 .eslintrc.js 中使用自己喜爱的代码风格。
react-devtools该模版已经默认开启了浏览器的redux-devtool，但是如果要让其工作起来，你需要下载相关的浏览器插件。
你也可以选择 Customized DevTools， 这个是建立在页面里面的一个组件，你可以在代码里自定义你需要的devtool。在这里查看更多的选项。
Production生产环境的文件(也就是dist里的文件)是适用于真实的server的，所以你不应该直接访问index.html。如果要对dist内的文件进行测试，你可以使用静态服务器：
npm install -g anywhere # 或者其他静态服务器 # 在 `./dist` 文件夹里 anywhereTODO
[x] eslint
[ ] unit test
[ ] e2e test
[x] Redux comming soon!
[x] hot-reload for redux
[ ] better structure for redux
[x] support redux-devtools-extension
[ ] 使用happypack让构建更快
[x] DevTools的选择：使用浏览器的还是自定义的
Known Issues当有使用react-router的时候，热更新会导致浏览器的console报告错误信息，这是react-router v3的已知issue，但是并不影响使用。我使用了随机数暂时解决了这个报错的问题，谢谢@chenz24提供的解决方案。v4似乎不存在这个问题。
当有使用Redux的时候，热更新会导致浏览器报错
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81947.html
项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...
摘要：编码规范是独角兽公司内部的编码规范，该项目是上很受欢迎的一个开源项目，在前端开发中使用广泛，本文的配置规则就是以编码规范和编码规范作为基础的。 更新时间：2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范 前言 为什么要使用 ESLint 在项目开发过程中，编写符合团队编码规...
摘要：初始化项目使用创建项目此过程不做详解，然后运行使其暴露等配置文件自定义上述步骤并没有暴露脚手架封装的操作，为了使得项目统一规范化，添加操作是非常不错的选择关于其他的操作，请参见官网，本文主要针对限制规范配置。 原博客地址：https://yezihaohao.github.io 前言 了解eslint基础用法，若想更进一步了解其，请查阅官网以及相关资料(中文网) 若有问题请指出或加群...
摘要：前言想要快速开始多页面应用项目结构如何更合理想要快速上手想要快速使用想要一键使用并能快速自定义主题样式可以的这里，受和的启发，我做了这样一个的脚手架，让你一键搭建项目，快速开始。 前言 想要快速开始 react 多页面应用？ 项目结构如何更合理？ 想要快速上手 Mobx? 想要快速使用 TypeScript? 想要一键使用 Ant-Design 并能快速自定义主题样式？ 可以的！！！ ...
摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。 一、 快速开始： 全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...
阅读 3269·2021-11-19 09:40
阅读 1300·2021-10-13 09:41
阅读 2438·2021-09-29 09:35
阅读 2504·2021-09-23 11:21
阅读 1418·2021-09-09 11:56
阅读 622·2019-08-30 15:53
阅读 720·2019-08-30 15:52
阅读 451·2019-08-30 12:47
