utils-lllllll v1.0.1
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 本地包调试