华强北网站建设公司,蛋糕烘焙wordpress主题,域名解析完成网站怎么做,设计工作室经营范围本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。
实现一个经常用的 rollup 插件 alias
首先执行npm init命令初始化一个package.json文件#xff0c;因为插件使用了ty…本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。
实现一个经常用的 rollup 插件 alias
首先执行npm init命令初始化一个package.json文件因为插件使用了typescript作为类型校验所以需要执行tsc --init命令去生成一个ts的配置文件tsconfig.json执行完上述的命令之后安装项目依赖。
pnpm i rollup typescript rollup/plugin-typescript tslib -D先简单实现一下这个插件插件要求导出一个方法并且返回一个对象
import { Plugin } from rollup
export function alias(): Plugin {return {name: alias,resolveId(source: string, importer: string | undefined) {console.log(resolveId, source, importer)return source}}
}接下来需要将index.ts编译成可执行的js文件新增一个rollup配置文件rollup.config.js指定输入以及输出
import { defineConfig } from rollup
import typescript from rollup/plugin-typescriptexport default defineConfig({input: ./src/index.ts,output: {file: ./dist/index.js,format: es},plugins: [typescript({module:esnext})]
})在package.json里面新增一条命令并执行pnpm build
scripts: {build: rollup -c rollup.config.js},一般执行到这里会有一个CommonJS和ES module的类型冲突如图所示 我们只需要在package.json指定类型即可
type: module,再次运行pnpm build可以发现在dist目录下会生成打包完成之后的index.js文件。
当别人去安装你的包的时候需要所指定执行的文件在哪即修改package.json里面的main字段由main: index.js改为main: ./dist/index.js
使用开发的 alias 插件
新增一个example文件夹新增index.js、add.js写入相关的测试代码
import { add } from ./utils/add.js
console.log(add(1, 2))export function add (a, b) {return a b;
}在example里面执行初始化并且新增rollup配置文件rollup.config.js并且补充build命令具体操作和上文类似
import { defineConfig } from rollup
export default defineConfig({input: index.js,output: {file: ./dist/index.js,format: es}
})通过在example目录下执行如下命令就可以使用我们开发的插件
// ../上层目录
pnpm i ../ -D执行完之后会新增如下代码
devDependencies: {rollup: ^3.26.2,rollup-alias: link:.. // 新增的依赖
}在example/rollup.config.js里面引入我们编写的 alias 插件完整的代码如下
import { defineConfig } from rollup
import { alias} from rollup-aliasexport default defineConfig({input: index.js,output: {file: ./dist/index.js,format: es},plugins: [alias()]
})在此执行pnpm build可以发现已经成功的打印出了log
为插件添加TS类型提示
首先补充插件的参数类型提示并且完善一下插件逻辑
import { Plugin } from rollup
interface AliasOptions {entries: { [key: string]: string }
}export function alias(options: AliasOptions): Plugin {const { entries } optionsreturn {name: alias,resolveId(source: string, importer: string | undefined) {console.log(resolveId, source, importer)const key Object.keys(entries).find((e) {return source.startsWith(e)})if (!key) return sourcereturn source.replace(key, entries[key]) .js}}
}执行build之后在我们会发给 alias 传参的时候并没有对应的参数类型提示 这里需要在tsconfig.json文件中开启 declaration: true 功能以及设置outDir: ./dist 在package.json里面添加types: ./dist/index.d.ts,执行完上述操作之后再次执行 pnpm build
补充单元测试
安装vitest补充单元测试文件index.spec.ts添加测试命令
pnpm i vitest -D// index.spec.ts
import { describe, it, expect } from vitest
import { alias } from .describe(alias, () {it(should replace when match successful, () {const aliasObj:any alias({entries: {: ./utils}})expect(aliasObj.resolveId(/add)).toBe(./utils/add.js)})it(should not replace when match fail, () {const aliasObj: any alias({entries: {: ./utils}})expect(aliasObj.resolveId(!/add)).toBe(!/add)})
})scripts: {test: vitest},我们需要在 build 的时候排除掉我们的测试文件可以在 tsconfig.json 补充如下代码 exclude: [./src/*.spec.ts] 然后执行pnpm test 可以看到这里的测试用例是通过的也可以证明我们写的代码是没问题的。
entries 支持数组格式
这里直接贴完成之后的代码
import { Plugin } from rollupinterface AliasOptions {entries: { [key: string]: string } | { find: string, replacement: string }[]
}export function alias(options: AliasOptions): Plugin {const entries normalizeEntries(options.entries)return {name: alias,resolveId(source: string, importer: string | undefined) {console.log(resolveId, source, importer)const entry entries.find((e) e.match(source))if (!entry) return sourcereturn entry.replace(source)}}
}function normalizeEntries(entries: AliasOptions[entries]) {if (Array.isArray(entries)) {return entries.map(({ find, replacement }) {return new Entry(find, replacement)})} else {return Object.keys(entries).map((key) {return new Entry(key, entries[key])})}
}class Entry {constructor(private find: string, private replacement: string) { }match(filePath: string) {return filePath.startsWith(this.find)}replace(filePath: string) {return filePath.replace(this.find, this.replacement)}
}以上就简单的实现了一个rollup插件开发的大致流程
