@wbts/template-react v1.0.1

template-react

基于 create-react-app 脚手架的react模板项目，包含常用目录结构、组件及配置习惯。新项目可以基于此模版快速构建 ～

官方脚手架构建项目使用方法：

# 全局安装
npm install -g create-react-app
create-react-app [项目名]

# 免安装方式
npx create-react-app [项目名]

# yarn
yarn create react-app [项目名]

1.项目初始化

• 第一步拉去git仓库代码：

git clone https://gitee.com/whereabouts-ui/template-react.git [项目名]

• 第二步修改package.json项目名称为[项目名]
• 第三步初始化项目git仓库

cd [项目名]
rm -rf .git 
git init

• 第四步添加新项目的远程仓库

git remote add origin https://gitee.com/whereabouts-ui/[仓库名称].git

• 最后一步add和commit初始化的项目相关文件，并push到远程仓库，完成对项目的初始化。

git add *
git status
git commit -m 'init'
git push -u origin master

2.SDK发布及使用

2.1 SDK开发

• 安装babel, 用于开发完后编译JSX语法：

yarn add @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/plugin-syntax-jsx --dev

• 根目录下创建babel.config.json，添加babel配置：

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-syntax-jsx"
  ]
}

• 开发的UI组件注意需要引入 React ，否则babel编译后找不到

import React from "react";

• 编译JSX输出到lib目录，并忽略其他类型文件，直接拷贝，如：css

./node_modules/.bin/babel src --out-dir lib --copy-files

• 由于是整体编译的src下所有内容，可以在lib中删除无关的文件

2.2 SDK发布

package.json文件中主要关注下述配置，每次发布都需要更新version：

{
  "name": "@wbts/template-react",
  "version": "1.0.3",
  "main": "lib/sdk",
  "files": ["lib"]
}

• 切换npm源为官方，淘宝为https://registry.npm.taobao.org

npm config set registry https://registry.npmjs.org

• 登录

npm login

# Username: hezebin
# Email: 86744316@qq.com

• 发布

npm publish --access public

2.3 使用SDK

• 安装SDk

yarn add @wbts/template-react

• 使用SDK

import Sso from '@wbts/template-react'

console.log(Sso.registerUrl)