https://www.mdnice.com/writing/5d425da6d74f4d8ab3d8d3537cdc15c5 https://juejin.cn/post/6871591252417216520 https://juejin.cn/post/6950557086916804645

组件工具类库

1、npm init -y

2、初始化ts环境 yarn add typescript -D tsc --init

3、修改tsconfig.json配置文件

4、修改compilerOptions

5、修改package.json

"main": "dist/index.umd.js", "module": "es/index.esm.js", "types": "types/index.d.ts",

main 变更以 dist/ 为入口的 index.js 文件 module 以 dist/ 为入口的功能模块文件 unpkg 以 dist/ 为入口的 index.js 文件，非官方字段用于 cdn 服务 jsdelivr 与 unpkg 配置相同，非官方字段用于 cdn 服务 typings 类型支持文件 types/index.d.ts（大部分 npm 包使用 TypeScript 开发） files 配置所需文件列表 [ "src/*.js", "dist/*.js", "types/*.d.ts" ]

"files": [ "dist", "lib", "es", "src", "types" ],

6、添加.gitignore

7、初始化rollup环境

yarn add cross-env rollup -D yarn add @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-replace -D

yarn add rollup-plugin-typescript2 rollup-plugin-terser rollup-plugin-serve rollup-plugin-livereload -D

babel相关 yarn add @rollup/plugin-babel @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript -D yarn add @babel/runtime @babel/runtime-corejs3

添加 rollup.config.js

同时修改package.json "build": "cross-env NODE_ENV=prod npm run clean && rollup -c", "start": "cross-env NODE_ENV=dev npm run clean && rollup -w -c", "watch": "rollup -c -w", "clean": "rimraf lib dist es", "check-types": "tsc --noEmit"

8、配置babel babel.config.json { "presets": [ "@babel/preset-typescript", ["@babel/preset-env", { "targets": { "browsers": ["ie >= 11"] }, "modules": false, "loose": true }] ], "plugins": [ ["@babel/plugin-transform-runtime", { "corejs": 3 }] ] }

9、配置rollup

index.html

11、eslint配置 添加.eslintrc.js

npm install eslint@^7.32.0 @typescript-eslint/parser@^4.31.1 @typescript-eslint/eslint-plugin@^4.31.1 --save-dev

添加"lint": "eslint --ext js,ts src"

12、安装prettier

{ "printWidth": 100, //单行长度 "tabWidth": 2, //缩进长度 "useTabs": false, //使用空格代替tab缩进 "semi": true, //句末使用分号 "singleQuote": true, //使用单引号 "bracketSpacing": true, //在对象前后添加空格-eg: { foo: bar } "arrowParens": "avoid" //单参数箭头函数参数周围使用圆括号-eg: (x) => x }

13、Husky 配置

10、npm link 本地包调试

https://juejin.cn/post/7021518800470147079