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

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

colorfontcolor

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

具体使用

npm i colorontcolor

js 复制代码

//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打包，这个是专门写工具库的，体积小还快。地址

用的相关库

js 复制代码

  "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修改

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

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()],
    }
];

这个参考了一个博客，我忘了是哪个了，最近翻阅资料太多了

创建tsconfig.json

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包里

打包完后，登录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，只能更大

有问题的可以私信