可以自定义配置的React脚手架

xialong 发布于2019-08-20 14:49 / 1663人阅读

摘要：和是该模版默认的代码风格，你也可以在中使用自己喜爱的代码风格。你也可以选择，这个是建立在页面里面的一个组件，你可以在代码里自定义你需要的。

react-webpack-boilerplate

A SPA boilerplate with React, built with love.

Features

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 lint

Doc

该模版大部分参考了 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
        }
    }
}
...

你便可以在测试服务器中使用你所代理的接口。在这里查看更多的选项。

Env

vue-cli/webpack 的文档详细地介绍了环境变量地用法。

Hot-Reload

该模版使用了react-hot-loader v3来对React的组件进行热更新，甚至支持Redux的热更新！希望你玩的开心。

ESlint

standard 和 standard-react 是该模版默认的代码风格，你也可以在 .eslintrc.js 中使用自己喜爱的代码风格。

react-devtools

该模版已经默认开启了浏览器的redux-devtool，但是如果要让其工作起来，你需要下载相关的浏览器插件。

你也可以选择 Customized DevTools，这个是建立在页面里面的一个组件，你可以在代码里自定义你需要的devtool。在这里查看更多的选项。

Production

生产环境的文件(也就是dist里的文件)是适用于真实的server的，所以你不应该直接访问index.html。如果要对dist内的文件进行测试，你可以使用静态服务器：

npm install -g anywhere # 或者其他静态服务器

# 在 `./dist` 文件夹里
anywhere

TODO

[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的时候，热更新会导致浏览器报错 does not support changing store on the fly...，而且会导致redux热更新无效。~~

云服务器 GPU云服务器可以自定义域名的博客自定义镜像可以共享自定义配置配置自定义头部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81947.html

webpack工程化集成React技术栈（一）

项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...

tianhang 2019-08-22 14:47 评论0 收藏0
在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范

摘要：编码规范是独角兽公司内部的编码规范，该项目是上很受欢迎的一个开源项目，在前端开发中使用广泛，本文的配置规则就是以编码规范和编码规范作为基础的。更新时间：2019-01-22React.js create-react-app 项目 + VSCode 编辑器 + ESLint 代码检查工具 + Airbnb 编码规范前言为什么要使用 ESLint 在项目开发过程中，编写符合团队编码规...

Hujiawei 2019-08-23 14:55 评论0 收藏0
React项目笔记之create-react-app自定义ESLint配置文件

摘要：初始化项目使用创建项目此过程不做详解，然后运行使其暴露等配置文件自定义上述步骤并没有暴露脚手架封装的操作，为了使得项目统一规范化，添加操作是非常不错的选择关于其他的操作，请参见官网，本文主要针对限制规范配置。原博客地址：https://yezihaohao.github.io 前言了解eslint基础用法，若想更进一步了解其，请查阅官网以及相关资料(中文网) 若有问题请指出或加群...

Dogee 2019-08-20 15:25 评论0 收藏0
有个功能丰富的 react 脚手架,了解下？

摘要：前言想要快速开始多页面应用项目结构如何更合理想要快速上手想要快速使用想要一键使用并能快速自定义主题样式可以的这里，受和的启发，我做了这样一个的脚手架，让你一键搭建项目，快速开始。前言想要快速开始 react 多页面应用？项目结构如何更合理？想要快速上手 Mobx? 想要快速使用 TypeScript? 想要一键使用 Ant-Design 并能快速自定义主题样式？可以的！！！ ...

senntyou 2019-08-23 12:56 评论0 收藏0
通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

Cympros 2019-08-02 16:02 评论0 收藏0