运行流程
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 linkmylibName
- 在
-
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" } },