Skip to content
一个基于 create-react-app 和 react-app-rewired 开箱即用的一个基础项目骨架。
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cra-config
public
src
.eslintignore
.eslintrc.js
.gitignore
README.md
config-overrides.js
package.json

README.md

一个基于 create-react-app 和 react-app-rewired 开箱即用的一个基础项目骨架。

本项目想法源自于 既希望能直接享受到 cra 带来的可升级的机制, 又能够和 vue-cli@2 一样支持一些基础的配置项, 于是利用 react-app-rewired 和 环境变量 的支持 把部分选项直接写成了配置项。 支持直接修改配置项使用。

支持 module.css / module.less 等 css module 语法,推荐使用 npm i -S classnames 库来更好的使用 css module

内置了 huskyeslint-config-standardprettier-eslint 来运行 git commit 时代码的自动格式化。自动格式化 使用了 standard 的代码风格

状态管理工具方面使用 @rematch , 并且内置了插件 @rematch/immer 以及 @rematch/loading

具体使用方式参考: Rematch实践指南

内置了组件库 antd 结合 babel-plugin-import 做了组件(lodash也可以)的按需引入 (直接修改 src/theme.js 可以修改主题色)。当然要用别的组件库也是可行的,需要改的东西很少不是嘛?

使用 react-router-config 来达到和 vue-router 类似的体验。

结合 react-loadableimport() 实现了路由的按需加载

package.json 使用了 ~ 版本,来尽量保证安装时依赖升级导致项目报错问题

对于 mock 数据的需求,使用npm run dev-mock启动服务,实现了两种途径的mock数据:

  1. 直接 webpack-dev-server 提供的 proxyTable
  2. 使用本地 mock 数据,在 mocker文件夹下,修改添加即可, 或者使用 easymock 这样类似的在线 mock 服务,基于这样的需求实现了一个 apiProxy 的高阶函数,提供了本地mock的支持,当然他也能够比较方便的进行各种需求的改造。
/**
 * 拦截请求函数,只在 开发并且开启了mock的情况下启用
 * @param {Function} fn
 * @returns {fn}
 */
const apiProxy = fn => {
  if (process.env.NODE_ENV === 'development' && process.env.mock === true) {
    return function(url, data = {}, otherOptions = {}) {
      return import('../mocker/index').then(({ default: mocker }) => {
      // 如果未找到 mock 对应的数据的情况依旧走老代码
        if (!mocker[url]) {
          return fn.call(this, url, data, otherOptions)
        }
        const isFn = typeof mocker[url] === 'function'
        // 如果是一个函数那么一定要返回 Promise
        if (isFn) {
          return mocker[url](data)
        }
        // 其他情况,直接使用Promsie返回值
        return mocker[url]
      })
    }
  }
  return function(...args) {
    return fn.apply(this, args)
  }
}

使用说明

当需要写入使用的全局环境变量时,需使用 process.env.REACT_APP_XXX = xxx 形式才能拿到。 (只支持字符串)

使用 %REACT_APP_XXX% 方式获取

已经支持的配置如下: cra-config/config.js

 {
  alias: {
    '@': resolveApp('src')
  },
  // 开发环境
  dev: {
    /**
     * 是否启用 https 的构建
     * 修改 host, port 等。
     * 如果 process.env.xxx 有对应的值,那么会覆盖这里的配置
     */
    HTTPS: false,
    HOST: '0.0.0.0',
    PORT: 5000,
    /**
     s* 在 webpack 中 是否启用 eslint 检查
     */
    useEslint: true,
    /**
     * 是否自动打开浏览器
     */
    autoOpenBrowser: true,
    /**
     * 本地服务器代理的配置
     */
    proxyTable: {}
  },
  // 构建正式
  build: {
    /**
     * 在 webpack 中 是否启用 eslint 检查
     */
    useEslint: false,
    /**
     * 构建时打包文件夹
     */
    appBuild: resolveApp('dist'),
    /**
     * 是否启用 sourcemap
     */
    productionSourceMap: false
  }
}
You can’t perform that action at this time.