#pic_center =400x
参考文章:
react开发环境搭建
系列文章:
文章目录
- create-react-app安装react
- npm版本管理
- npm 镜像安装
create-react-app安装react
查看是否安装过create-react-app
npm list create-react-app
输出:-- create-react-app@5.0.1
npm版本管理
npm版本升级指南
npm -v显示版本:X.X.XX
升级npm
npm install -g npm
npm报错 npm WARN deprecated…的问题解决方式
可能npm版本 过高 或 过低
npm 镜像安装
直接使用官方镜像搭建react,比较慢, 所以使用国内镜像.
【npm淘宝镜像过期解决办法】
查看镜像
npm config get registry
临时使用:
在使用npm安装包的时候,可以通过–registry参数指定一个临时的镜像源。例如:
npm install [package_name] --registry=https://registry.npm.taobao.org
永久设置:
可以通过修改npm的配置文件来永久设置镜像源。配置文件通常位于用户的家目录下,文件名为.npmrc。你可以使用文本编辑器打开这个文件,并添加或修改以下行:
registry=https://registry.npm.taobao.org
或者命令行
npm config set registry https://registry.npmmirror.com
也就是说https://registry.npm.taobao.org该镜像已过期无法使用需要更换,需要更换其他如npm官方镜像源,淘宝更新后的新镜像源,已经阿里云,腾讯云其他镜像地址。
这里可以更换的镜像有:
npm 官方原始镜像网址是:https://registry.npmjs.org/ (这里是更换回npm官方镜像,下载依赖过慢不推荐使用)
npm新淘宝镜像:https://registry.npmmirror.com
阿里云 NPM 镜像:https://npm.aliyun.com
腾讯云 NPM 镜像:https://mirrors.cloud.tencent.com/npm/
华为云 NPM 镜像:https://mirrors.huaweicloud.com/repository/npm/
网易 NPM 镜像:https://mirrors.163.com/npm/
中科院大学开源镜像站:http://mirrors.ustc.edu.cn/
清华大学开源镜像站:https://mirrors.tuna.tsinghua.edu.cn/
这里通过npm config set registry 镜像地址,设置新的镜像
使用create-react-app搭建react, --template typescript通过–template typescript使得我们的项目支持ts,但是项目中package.json中没看到typescript,
npx create-react-app antd-demo --template typescript
npm安装typescript,将TypeScript作为开发依赖项安装到你的项目中。–save-dev标志表示TypeScript将被添加到你的package.json文件中的devDependencies部分。
# 不需要执行npm install typescript --save-dev 因为 --template typescript已经支持并且在react内置了typescipt
npm install typescript --save-dev
安装 antd
npm install antd --save
在写代码时发现导入组件时 如import {UseRefDemo}“./components/index.tsx” 必须写上 tsx后缀。因此想要配置默认解析一些文件拓展名,配置主要参看文章1,如下:
1- create-react-app 定义路径别名,默认识别 jsx格式文件
2-create-react-app设置路径别名
# 原先的脚本"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},# 新的脚本"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test --env=jsdom"},
原理是:使用create-react-app时,内部将一些配置文件封闭了,执行