闲来无事,写了一个npm包 1.1.2版本以后可以使用,前面的版本都是bug
具体使用
npm i colorontcolor
//es6环境,vue组件中使用
<template>
<div>
<h1 ref="title">祖国繁荣昌盛</h1>
</div>
</template>
import colorfont from 'colorfontcolor';
export default {
monted() {
const el = this.$refs.title
colorfont(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,只能更大
有问题的可以私信