react-项目模板

jiezi

6 年前

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

项目名地址 gitee

技术栈

react
react-router
mobx
less(css module)

使用 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 : './');

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

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

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

react-项目模板

less-modules

打包后的资源路径

proxy