由于每个项目中都会有一个utils.js的公共函数文件,而每个项目中有百分之80是可以复用这些方法的,就想将这些公共的函数方法给封装成npm,尽量做到代码的复用最大化。
需要先确定的事情:
编写方面:
- 使用typescript进行编写
- 使用ES6的export命令显式指定输出的代码,方便直接使用import进行引用
项目配置方面:
- 需要将ts转为js
准备阶段
- 安装node
npm会在安装node时默认安装上
- 注册npm账号
开始
新建一个npm项目
npm init or npm init -y后会自动生成package.json文件。
npm init -y 会使用默认配置
npm init 会需要在创建时就进行一些配置
具体的配置项可以根据npm官网进行配置:https://www.npmjs.cn/
由于需要使用typescript进行编写,所以我们需要再安装typescript和ts-node两个依赖。
npm install typescript安装ts依赖
npm install ts-node可以让我们无需编译直接在Node.js上直接编译ts
然后我们就生成了一个基础的package.json文件:
{
"name": "npm_demo",
"version": "1.0.0",
"description": "公共方法工具库",
"main": "index.js",
"scripts": {
"build": "tsc"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ts-node": "^10.9.1",
"typescript": "^4.8.4"
}
}
进行基本的项目配置
配置tsconfig.json文件:
{
"compilerOptions": {
"target": "es6",
"module": "ESNext",
"declaration": true,
"outDir": "./dist",
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": false,
},
"include": ["main"],
"exclude": ["node_modules","./dist"]
}
以上的配置项根据自己的真实需要进行配置即可。
项目文件夹部分如图所示:
主要代码的编写在main文件夹下,打包出来的代码在dist文件中。
npm的发布
npm publish --access=public将包进行发布,值得注意的是每次发布记得修改版本号。
此时,我们可以在npm官网上查找我们上传的项目名字了,如果可以查到,就说明发布成功啦。同时我们可以在一个项目中npm install 项目名去进行依赖的安装和最基础的使用了。
思考
我们的包这样发布成功后就完全结束了吗?是否要进行一些扩展?是否项目引用了这个包之后打包出来的大小会受影响?
答案当然是没有结束。
值得考虑的点:
| 问题 | 解决方案 |
|---|---|
| 是否允许用户去选择用ECMAScript模式或者CommonJS模式的方式进行引用? | 可使用bable进行代码转换,然后package.json配置入口 |
| 引用该组件库后,只使用了该库中的部分方法,其他未使用的代码是否也会被打包? | 可使用摇树优化 |
这篇主要讲如何发布一个npm工具库,下一篇讲最后的工具库优化~~~请大佬们多多指教!!