您现在的位置是:首页 >其他 >开发一个vue自定义指令的npm库-系列三:使用rollup打包npm库并发布网站首页其他

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

永远不会太晚 2024-06-14 17:17:43
简介开发一个vue自定义指令的npm库-系列三:使用rollup打包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”:启用此选项可以生成对应的声明文件(.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

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。