使用vite构建js库并发布到npm
每次开始新项目的时候，总是需要把老项目中封装的各种工具函数 copy 一份，为了省点事儿，索性封装了一个 js 库，发布到 npm 上，这样以后需要使用时，直接安装一下然后引入就行了。
这里以 vite 为例:
npm create vite@latest jsTool
// Select a framework这一步选择Others
// Select a variant这里选择 create-vite-extra
// Select a template这里选择 library
// Select a variant这里选择JavaScript或TypeScript均可
1
2
3
4
5
6
2
3
4
5
6
到这里，一个基础的框架就搭建好了，进入项目
cd jsTool
npm install
1
2
2
现在修改 vite.config.js 配置文件如下：
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
entry: './lib/main.js',
name: 'jsTool',
fileName: 'jsTool'
}
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
修改 package.json 文件：
{
"name": "lei-js-tool",
"version": "0.0.4",
"type": "module",
"files": [
"dist"
],
"main": "./dist/jsTool.umd.cjs",
"module": "./dist/jsTool.js",
"types": "./dist/index.d.ts",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"vite": "^5.2.10"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
现在就可以在 lib 目录下的 main.js 中编写工具函数了。如：
export function getDecimalPlaces(a) {
if (Number.isInteger(a)) {
return 0;
}
const parts = a.toString().split(".");
return parts[1] ? parts[1].length : 0;
}
// 加法运算
export function add(a, b) {
const baseNum1 = getDecimalPlaces(a);
const baseNum2 = getDecimalPlaces(b);
const baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
return (a * baseNum + b * baseNum) / baseNum;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
虽然是用 js 写的工具函数，但是想在编辑器中给出 ts 类型提示，因此需要写一个类型声明文件
在 index.d.ts 中编写类型声明
export function add(a: number, b: number): number;
1
现在执行 npm run build 打包，然后手动将 index.d.ts 文件移到 dist 目录下，然后执行发布到 npm 的流程即可.
发布完后，在项目中使用如下
// 安装
npm install lei-js-tool
// 引入
import { add } from "lei-js-tool"
// 使用
console.log(add(0.1, 0.2))
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
编辑 (opens new window)