开发一个vue自定义指令的npm库-系列三：使用rollup打包npm库并发布

古城微笑少年丶 2024-03-22 14:22 71阅读 0赞

#### 配置 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”：启用此选项可以生成对应的声明文件（.d.ts）。  
“outDir”：指定输出目录，即编译后的文件应该输出到哪个目录。  
“isolatedModules”：启用此选项可以让 TypeScript 编译器将每个文件作为独立的模块来处理，避免命名冲突和循环依赖。  
“include”：指定需要编译的文件列表。这里指定为 “src”，表示只编译 src 目录下的文件。  
“exclude”：指定不需要编译的文件列表。这里指定为 “node\_modules” 和 “dist”，表示不编译这两个目录下的文件。

#### 打包 ####

npx rollup -c

会生成ts声明文件，两个输出文件：  
./dist/index.min.js，使用 UMD 格式输出，  
./dist/index.esm.js，使用 ES 模块格式输出

#### 发布npm包 ####

package.json

{
        
      "name": "svg-zoom-drag-vue-directives",
      "author": "zqy233",
      "version": "1.0.8",
      "typings": "./dist/index.d.ts",
      "main": "./dist/index.min.js",
      "module": "./dist/index.esm.js",
      "type": "module",
      "exports": {
        
        ".": {
        
          "types": "./dist/index.d.ts",
          "import": "./dist/index.min.js",
          "require": "./dist/index.esm.js"
        }
      },
      "files": [
        "dist"
      ],
      "keywords": [
        "vue",
        "vue directives",
        "svg drag",
        "svg zoom"
      ],
      "license": "MIT",
      "repository": {
        
        "type": "git",
        "url": "https://github.com/zqy233/svg-zoom-drag-vue-directives.git"
      },
      "bugs": {
        
        "url": "https://github.com/zqy233/svg-zoom-drag-vue-directives/issues"
      },
      "homepage": "https://github.com/zqy233/svg-zoom-drag-vue-directives",
      "devDependencies": {
        
        "@rollup/plugin-terser": "^0.4.1",
        "@rollup/plugin-typescript": "^11.1.0",
        "rollup": "^3.21.5",
        "rollup-plugin-delete": "^2.0.0",
        "tslib": "^2.5.0"
      },
      "dependencies": {
        
        "vue-demi": "^0.14.0"
      }
    }

“files” ：指定了应该包含在该包中的文件和目录。这意味着，当其他人安装该包时，将只获得编译后的dist目录文件，而不是源代码。  
“typings”：指定 TypeScript 类型定义文件的位置，这里指定为 “./dist/index.d.ts”，表示类型定义文件在 dist 目录下。  
“main”：指定包的入口文件位置，这里指定为 “./dist/index.min.js”，表示入口文件在 dist 目录下，且已经被压缩。  
“module”：指定包的 ES 模块入口文件位置，这里指定为 “./dist/index.esm.js”。  
“type”：指定模块类型，这里指定为 “module”，表示该包是一个 ES 模块。  
“exports”：定义包的导出方式，功能类似main、module、type，是一种较新的规范，这里使用了一个子属性的对象来定义导出。具体解释如下：  
“.”：表示导出的根目录，即默认导出的位置。  
“types”：定义类型定义文件的导出路径。  
“import”：定义 ES 模块的导出路径。  
“require”：定义 CommonJS 模块的导出路径。  
该配置意味着，在使用该包的时候，可以直接导入包的根目录（默认导出），也可以使用 import 语句导入 ES 模块，或者使用 require 导入 CommonJS 模块。同时，该包还提供了 TypeScript 类型定义文件。

#### 发布至npm市场 ####

根目录输入命令  
npm login  
输入账户密码  
npm publish