react 项目模板

根据自己常用的一些配置和需求,制定了一个项目模板
基于 creat-react-app v2.x 搭建的项目模版
以后会持续更新,不过频率不会很高

项目名地址 gitee

技术栈

1. react
2. react-router
3. mobx
4. less(css module)

less-modules

使用babel-plugin-react-css-modules.
这里需要注意一下,babel-plugin-react-css-modules的配置项:generateScopedName,其默认值是[path]___[name]__[local]___[hash:base64:5];而对应的css-loader配置项localIdentName的默认值是[hash:base64:5].导致元素的类名和编译出来的 css 类名不匹配.

当前配置的css-module是如果直接以.less结尾则使用css-module,如果以global.less则使用原始的less.

打包后的资源路径

默认打包后,index.html文件中的资源路径都是以/开头的,这可能会导致引用错误.解决方法:

/config/paths.js

- envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
+ envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');

proxy

新版本的脚手架无法在package.json中使用对象形式的proxy.需要安装http-proxy-middleware插件.然后配置proxy

cd my-project
yarn add http-proxy-middleware -D
touch setupProxy.js

注意/setupProxy.js这个文件的路径在/config/paths.js中设置.按照插件说明配置完后,重启即可自动代理