react创建项目的流程和安装相关依赖

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45077505/article/details/102456099

总结一下自己使用react创建项目时的流程和顺序

创建项目

1.npm install create-react-app -g
2.create-react-app demo  (demo为项目名)
3.cd demo   
4.npm install
5.npm start     //运行

创建完成的文件结构

public里面的文件：

• favicon.ico即为html的ico 图标，可以替换
• manifest.json，是app的配置文件，设置icons，首页路径等；

src文件夹：

• index.js 是入口文件
• App.js是最大的组件App
• registerserviceworker.js 用来做资源离线的缓存，registerServiceWorker注册的service worker 只在生产环境(正式环境)中生效。

常用命令

• npm start 启动项目，在 http://localhost:3000查看项目运行
• npm run build 项目打包，生成build文件夹
• npm run eject弹出配置文件，用于修改默认的配置，操作不可逆
• npm test --测试

安装Ant Design

1、

cnpm install antd --save  或者 cnpm install antd-mobile --save

2、然后使用react-app-rewired 并修改 package.json 里的启动配置，安装这个工具后，在项目根目录中新建文件config-overrides.js文件。便可以在里面进行各种webpack的骚操作了~

npm install react-app-rewired --save-dev

然后配置 package.json
下图是修改前

下图是修改后

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
)
引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [email protected] 版本的关系，还需要安装 customize-cra，否则会出现问题。

npm install customize-cra --save-dev

配置less

个人比较习惯使用less，但是使用create-react-app 创建的项目默认不支持less，所以多了这一步

1. 安装less依赖

cnpm install less-loader less --save-dev

2. 安装react-app-rewire-less
   cnpm install --save-dev react-app-rewire-less
3. 修改config-overrides.js

最终的config-overrides.js文件代码如下

const {
  override,
  fixBabelImports,
  addLessLoader,
} = require("customize-cra");


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
)