前端开发react+js/ts 环境搭建及发包

本文链接：https://blog.youkuaiyun.com/bulucc/article/details/127379791

1. 安装：node

2.安装create-react-app

# npm方式： 
npm install -g create-react-app

# cnpm方式： 
cnpm install -g create-react-app

# yarn方式： 
yarn global add create-react-app

# yarn安装：
npm install -g yarn 
# 查看版本：yarn -v

# cnpm安装：
npm install -g cnpm -registry=https://registry.npm.taobao.org 
# 查看版本：cnpm -v （备注：不要用npm install cnpm -g安装）

# 验证是否安装成功
create-react-app -V

3.创建项目

# 【 react + js 】
# projectname 项目名字，勿大写
create-react-app projectname

# yarn 创建
yarn create react-app projectname


# react+ts（tsx）

create-react-app projectname --template typescript

# yarn 创建
yarn create react-app projectname --template typescript
yarn create react-app projectname --template=typescript


# 使用最新版非全局安装
npx create-react-app projectname

4.安装`new-component`

# npm 安装
npm i -g new-component

# yarn 安装
yarn global add new-component

# new-component 创建新组件，项目根目录下执行
yarn new-component  name 
# 会在 packages/components/src 目录下新建一个新组件的文件夹，里边的内容是根据模板创建的
# 执行前 在 packages/components/index.tsx 中导出新组件
# yarn start 启动后，点击右上角的 组件 进入到组件列表，可以看到新建的组件
根据开发规范 开发组件

5.运行项目

# 进入项目
cd projectname 

# npm方式 
npm start

# cnpm方式
cnpm start

# yarn方式
yarn start


# 如果启动失败，建议操作
# 1、尝试切换镜像
# 2、删除node_modules及package-lock.json，重新yarn或者npm i
# 3、删除上述文件同时清除npm缓存，重新安装依赖包
npm cache clean --force

6、各UI组件安装

antd（ant design）安装：https://ant.design/index-cn

# npm 安装
npm install antd --save

# cnpm安装
cnpm install antd --save

# yarn安装
yarn add antd

antd-mobile（ant design mobile）V2 安装：https://antd-mobile-v2.surge.sh/index-cn

# npm 安装
npm install antd-mobile  --save

# cnpm安装
cnpm install antd-mobile  --save

# yarn安装
yarn add antd-mobile

其他组件均可按照上述方式安装

7.发布

# 只发布 packages/components/ 组件包，其他不进行发布的包在package.json中增加"private": true字段

# 开发完毕后，修改版本
lerna publish from-package --registry=http://registry.npm.baidu-int.com

lerna 安装避坑指南： npm start 避坑笔记_bulucc的博客-优快云博客