开发一个vue自定义指令的npm库

配置 rollup

使用rollup将 TypeScript 代码转换为 JavaScript，然后进行压缩和输出到目标文件。 项目根目录新建rollup.config.js

import typescript from "@rollup/plugin-typescript";import terser from "@rollup/plugin-terser";import del from "rollup-plugin-delete";export default { input: "./src/index.ts", output: [ { file: "./dist/index.min.js", format: "umd", name: "svgZoomDragVueDirectives", exports: "named", }, { file: "./dist/index.esm.js", format: "esm", }, ], plugins: [typescript(), del({ targets: "dist/*" }), terser()],};

配置了三个 Rollup 插件：typescript 用于将 TypeScript 代码转换为 JavaScript 代码，del 用于在输出之前删除旧的输出文件，terser 用于压缩 JavaScript 代码。 设置了 Rollup 的输入文件为 ./src/index.ts。 配置了两个输出文件： ./dist/index.min.js，使用 UMD 格式输出，指定了库的名称svgZoomDragVueDirectives，并且将导出命名（exports: “named”），umd格式可以直接运行在浏览器端。 ./dist/index.esm.js，使用 ES 模块格式输出，浏览器不能直接运行，实际开发中使用一般是这种格式的npm包文件，webpack、vite等打包工具中导入使用。 总的来说，这段代码的作用是将 TypeScript 代码编译、压缩并输出到指定的文件，以便在浏览器或其他运行环境中使用。

配置tsconfig.json

新建tsconfig.json

{ "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "lib": ["esnext", "dom"], "esModuleInterop": true, "noImplicitAny": true, "strict": true, "forceConsistentCasingInFileNames": true, "noUnusedLocals": true, "noUnusedParameters": true, "allowJs": false, "declaration": true, "outDir": "dist", "isolatedModules": true }, "include": ["src"], "exclude": ["node_modules", "dist"]}

“target”：指定 TypeScript 编译器的目标 ECMAScript 版本。这里指定为 “esnext”，表示最新的 ECMAScript 标准。 “module”：指定编译后的模块格式。这里也指定为 “esnext”。 “moduleResolution”：指定模块解析策略。这里指定为 “node”，表示使用 Node.js 的模块解析算法。 “lib”：指定编译时需要引用的 TypeScript 类型定义文件。这里指定了 “esnext” 和 “dom”，表示需要使用最新的 ECMAScript 和 DOM 类型定义。 “esModuleInterop”：启用此选项可以让 TypeScript 支持 CommonJS 和 ES6 模块之间的互操作。 “noImplicitAny”：启用此选项可以禁止使用隐式 any 类型。 “strict”：启用此选项可以开启所有严格类型检查选项，包括 noImplicitAny、strictNullChecks、strictFunctionTypes、strictBindCallApply、strictPropertyInitialization 和 noImplicitThis。 “forceConsistentCasingInFileNames”：启用此选项可以确保文件名在不同操作系统上的大小写一致。 “noUnusedLocals”：启用此选项可以禁止未使用的局部变量。 “noUnusedParameters”：启用此选项可以禁止未使用的函数参数。 “allowJs”：启用此选项可以允许编译 JavaScript 文件。 “declaration”：启用此选项可以生成对应的