react 项目模板

2024年2月23日 203次阅读 来源: darcrand

根据自己常用的一些配置和需求,制定了一个项目模板

基于 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中设置.按照插件说明配置完后,重启即可自动代理

    原文作者：darcrand
    原文地址: https://segmentfault.com/a/1190000019354438
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞