如和写一个库，并发布，我的colorfontcolor产生使用

闲来无事，写了一个npm包 1.1.2版本以后可以使用，前面的版本都是bug

colorfontcolor

具体使用
- 具体实现
- - 出现的细节
  - 出现的问题
写包时出现的问题
- 用的相关库
- - 问题

具体使用

npm i colorontcolor

//es6环境,vue组件中使用
<template><div><h1 ref="title">祖国繁荣昌盛</h1></div>
</template>
import colorfont  from 'colorfontcolor';export default {monted() {const el = this.$refs.titlecolorfont(el, {duration:3,blurRadius:5,color:['rgb(0, 26, 255)','#ffffff']});}
}

效果
在这里插入图片描述

具体实现

原理很简单就是将标签的文字分开装入span标签，用css动画延迟实现

出现的细节

我偷懒直接用了sass的解析，如果直接写也是可以写出来，以后会优化的，毕竟，sass包占一部分体积

出现的问题

一开始没有用热重载写的，这个工具库我是直接添加style到head里的，但是使用热重载之后我发现有点卡，发现热重载每次都重现调用第三方库的函数，导致我的style重复添加，最后看到出现了几十个重复标签

写包时出现的问题

我用的是rollup打包，这个是专门写工具库的，体积小还快。地址

用的相关库

  "dependencies": {"@rollup/plugin-commonjs": "^26.0.1","@rollup/plugin-node-resolve": "^15.2.3","@rollup/plugin-typescript": "^11.1.6","rollup-plugin-cleanup": "^3.2.1","rollup-plugin-terser": "^7.0.2","sass": "^1.77.8","tslib": "^2.6.3","typescript": "^5.5.4"}

不清楚的库可以搜搜，文章很多而且讲的都很详细，我就不过多说了

问题

如果你要自己写一个库

在github上创建一个仓库，开源协议选择MIT license
注册npm账号
本地拉github仓库
package.json修改

{"name": "github仓库名","version": "1.0.0","description": "Generate cool colors","type": "module","main": "./dist/index.cjs.js","module": "./dist/index.esm.js","types": "./dist/types/index.d.ts","files": ["dist"],"scripts": {"dev": "rollup -w -c","build:types": "tsc -b ./tsconfig.json","build": "npm run build:types && rollup -c","prepublish": "pnpm version && pnpm build"},"keywords": ["color","font","utils"],"repository": {"type": "git","url": "git+仓库地址"},"author": "LB","license": "ISC","bugs": {"url": "仓库地址//issues"},"dependencies": {"@rollup/plugin-commonjs": "^26.0.1","@rollup/plugin-node-resolve": "^15.2.3","@rollup/plugin-typescript": "^11.1.6","rollup-plugin-cleanup": "^3.2.1","rollup-plugin-terser": "^7.0.2","sass": "^1.77.8","tslib": "^2.6.3","typescript": "^5.5.4"}
}

添加rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import cleanup from 'rollup-plugin-cleanup';export default [{input: './src/index.ts',output: {dir: 'dist',format: 'cjs',entryFileNames: '[name].cjs.js',},plugins: [resolve(), commonjs(), typescript(), terser(), cleanup()],}, {input: './src/index.ts',output: {dir: 'dist',format: 'esm',entryFileNames: '[name].esm.js',},plugins: [resolve(), commonjs(), typescript(), terser(), cleanup()],}
];

这个参考了一个博客，我忘了是哪个了，最近翻阅资料太多了
6. 创建tsconfig.json

{"compilerOptions": {"baseUrl": ".","target": "es5","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"downlevelIteration": true,"declaration": true,"declarationDir": "dist/types","emitDeclarationOnly": true,"rootDir": "src","paths": {"@/*": ["src/*"],"@types/*": ["src/types/*"],"@utils/*": ["src/utils/*"]}},"include": ["src"]
}

具体目录大致这杨样在这里插入图片描述
dist是运训npm run build产生的打包结果会被放到npm包里
7. 打包完后，登录npm npm login,可能出现的问题，登录不上，切换国外镜像源
外国 npm config set registry https://registry.npmjs.org/ 中国 npm config set registry https://registry.npmmirror.com/,登录完后控制台可能没反应过来，看看npm账号是否又授权信息
在这里插入图片描述
有的话就终止控制台，直接npm publish，记住每次更显后都需要更改package.json的version，只能更大
有问题的可以私信