ts-react上线发布配置

运行流程

1、将tsx文件转化为jsx

• 新建tsconfig.build.json

• {
   	 "compilerOptions": {
      // 文件的输入路径
      "outDir": "dist",
      // 输出的类型
      "module": "esnext",
      // 指定编译后的ES版本
      "target": "es5",
      // 获得ts类型支持,(会给每个ts文件生成一个d.ts文件)
      "declaration": true,
      "jsx": "react",
      // 修改模块的编译方式 -six
      "moduleResolution": "node",
      // 支持 默认导入 React ,不加*的那种 	
      "allowSyntheticDefaultImports": true
     },
  // 包含哪些文件
  	"include": [
  	    "src"
  	],
  // 不希望编译的文件
  	 "exclude": [
  	    "src/**/*.test.tsx",
  	    "src/**/*.stories.tsx"
  	]
  }
  

• 修改 package.json

•   "scripts":{
    	...,
    	"build-ts": "tsc -p tsconfig.build.json",
    }
  

2、生成样式文件

• 修改 package.json

•  "scripts":{
   	...,
   	
   	"build": "npm run clear && npm run  build-ts && npm run build-css",
   	// node-sass 源文件 目标文件
       "build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
  
   }
  

3、提升效率-自动删除build文件夹

• 由于windows不兼容rm-rf的命令，所以需要安装一个rm-rf的插件

•   yarn add rimraf -D	
  

• 修改 package.json

•   "scripts":{
    	...,
    	"clear": "rimraf ./dist",
    	"build": "npm run clear && npm run  build-ts && npm run build-css",
    }
  

4、本地测试

• 修改 package.json

•   ...,
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.js",
    
  

• npm link

• 举个例子：mylib 是准备上传的npm包，myapp是本地的测试项目

  • 在mylib根目录运行npm link，（会创建软连接到全局）
  • 在myapp运行 npm link mylibName

• npm link 报错 （版本不一致）或者 报错webpack: Cannot read property 'matches' of null,解决方法：

  • 方法一：在mylib下运行npm link ../myapp/node_modules/react(前提：mylib 和 myapp是在同一个文件夹下，否则 npm link …/…/…就得这样寻找到对应的文件)
  • 方法二：将react和react-dom从dependencies中删除，同时在package.json中添加如下代码👇，有必要的话删除node_modules和package-lock.json和yarn.lock,之后重新运行npm i,：

  •   "peerDependencies": {
      	"react": ">=16.8",
      	"react-dom": ">=16.8"
      },
      "devDependencies": {
      	 "react": "^17.0.2",
      	 "react-dom": "^17.0.2",
      }
    

• 报错Error: Unable to find node on an unmounted component,这是react17的一个bug，等待官方修复。

  • 解决办法：package.json中新增如下代码👇：

  •     "resolutions": {
          "react": "^17.0.2",
          "react-dom": "^17.0.2"
    	},
    

• 报错npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree，是由于npm7在某些方面比npm6 更严格，

  • 解决办法：

  •  npx -p npm@6 npm i --legacy-peer-deps
    

5、上传到NPM

• 注册、登陆npm，如果当前用的淘宝的镜像，需要切换回npm的地址。

•    // 查看npm是否登录
    npm whoami
    // 进行登录
    npm adduser
  

• 修改package.json

•   {
    	...,
    	// 当前版本
    	"version": "0.1.7",
    	// 添加描述
    	"description": "React-TypeScript-Component",
    	// 作者
    	"author": {
    		"email": "1403693160@qq.com",
    		"name": "Daiwang"
  	   },
    	// 是否私有
    	"private": false,
    	// 协议
     	"license": "MIT",
    	// 关键词搜索
    	"keywords": [
    		 "react",
   		 "TypeScript",
    		 "component"
  		],
    	// 主页地址
  	"homepage": "https://github.com/DaiWang-Lei/robutaDesign",
    	// 仓库地址
      "repository": {
    		"type": "git",
    		"url": "https://github.com/DaiWang-Lei/robutaDesign"
  	},
    	// 将那个文件夹下的发送到npm上
      "files": ["dist"],
      "scripts":{
    		...,
    		// 发布之前会运行的脚本
    		"prepublishOnly": "npm run test:nowatch && npm run lint && npm run build"
    	 }
     }
  

• npm publish 发布到npm

6、优化package.json

• 将开发依赖移入devDependencies
• 加入peerDependencies

•  ...,
     "peerDependencies": {
       "react": ">=16.8",
       "react-dom": ">=16.8"
     },
  

• 发布前的校验

•   "scripts":{
    	...,
    	//使用eslint校验 js,ts,tsx 在src目录下，最大warning数为5
    	"lint": "eslint --ext js,ts,tsx src --max-warnings 10",
    	// 设置环境变量CI=true ，然后运行test测试文件，需安装cross-env插件
    	"test:nowatch": "cross-env CI=true react-scripts test",
    	"prepublishOnly": "npm run test:nowatch && npm run lint && npm run build"
    },
    // 添加提交前的校验 需要安装husky
     "husky":{
        "hooks":{
          "pre-commit":"npm run test:nowatch && npm run lint"
        }
  	},