什么是 npm
npm 是一个包管理工具方便代码复用维护，当 相似的代码需要在多个项目内使用时 可以考虑将它制作成一个 npm 包。
注册 npm 账号
打开 www.npmjs.com/ 即可注册一个 npm 账号有了它就可以发布 npm 包了。具体怎么做我们接着看下面的内容
npm 包的制作
1、初始化 npm 工程
npm init 根据提示填写信息 会生成一个包描述文件 package.json 这个文件里面的一些属性是需要我们注意的，比如包的入口等等。
认识 npm 包入口
npm 包入口规定了引入包时读取包的入口文件路径。
npm包的入口在描述文件 package.json 里面有描述根据不同的环境字段不一样
esModule 环境是 module
node 环境是 main
浏览器环境是 browser
ts 申明文件入口是 typings
举个例子
package.json
{
"main": "dist/node/index.js",
"module": "dist/esm/index.js",
"typings": "types/index.d.ts",
}
2、搭建环境。
在确定好了入口以后我们为了确保我们的代码最终会正确的生成在对应的入口路径目录内，我们需要搭建与之匹配的打包规则，我们可以选择 vite 或者 webpack 这里以 webpack 为例：
我们只需要在 package.json 的 scripts 内配置好对应的打包命令, 不同的打包命令对应不同的 webpack 打包 js 即可。
例如我们定义了两个个打包规则分别是:
webpack.config.js
webpack.module.js
那么对应的我们可以在 package.json 的 scripts 里定义三个命令来运行不同的打包配置
{
"scripts": {
"build": "webpack", // 对应的是 webpack.config.js webpack 默认配置入口就是 webpack.config.js
"build-module": "webpack --config webpack.module.js" // 对应的是 webpack.module.js
},
}
那么剩下来的事情就简单了我们可以通过不同文件 webpack.config 文件来规定不同的入口出口以及打包规则等等。举个例子
webpack.config.js
entry: "./index.js",
output: {
filename: "index.js",
path: __dirname + "/dist/node/",
},
webpack.module.js
entry: "./index.js",
output: {
filename: "index.js",
path: __dirname + "/dist/esm/",
},
中间的规则根据不同的需求来具体实现，实现了剩下的选项如module、plugins等等就完成环境的搭建啦。
配合 webpack或者vite 打包
就和普通项目工程一样我们可以配置自己的自动化构建工具如果选用 webpack 新建配置好 webpack.config.js 就行了 vite 同理新建好 vite.config.js
webpack 和 vite 打包的目的是为了将组件打包成目标标准库 比如打包成 commonjs 规范的目标文件 或者浏览器可直接使用的目标文件 亦或是 esmodule 规范的文件
3、正确放置依赖
在开发 npm 包的过程中我们可能会依赖第三方的包，例如 Vue、 lodash 等等。需要注意的是如果开发的是 Vue 组件包 需要把 Vue 放在 dependencies 中 并且在 webpack.config.js 中设置好 externals 排除掉 Vue。这样会避免用户代码中出现两份Vue。 而 loadsh 则根据需要可以选择打包到当前 npm 包 或者不打包，若是不想用户安装 lodash 那么可以选择把 lodash 放在 devDependencies 中，并且不做externals 处理，正常 import 即可。这意味着这个 lodash 将会打包到当前包内。但是如果用户项目已经存在了lodash那么会存在两份重复代码。
dependencies 和 devDependencies
需要注意的是
开发过程中可能会依赖一些其他的工具库需要放在对应的地方
devDependencies
开发过程中要用到实际运行不需要 例如 css-loader 什么的
dependencies
项目中到的第三方库但是最终不应该被打包到 dist 中去的依赖，需要动态安装，用 externals 排除 externals 这个字段是 webpack.config 中的字段
module.exports = {
entry: {
},
output: {
},
module: {
},
plugins: [
],
externals: {
vue: 'vue',
axios: 'axios',
}
};
peerDependencies
工具库和项目同时使用的同版本的依赖库
这样会避免出现出现类似两个 vue 版本的问题导致出现幽灵bug 例如 使用挂载在Vue原型上的 $bus 不生效
dependencies 里面的依赖会跟随使用者下载工具库的时候一并下载而 devDependencies 中的依赖使用者在安装的时候是不会随着 npm install 一并下载的会被 npm 忽略
第三方工具库是否存在与目标代码取决于是否使用 import 语句引入并且没有用 externals 排除
4、开发
配置好这些后就是开发了，这个就是运行前面配置好的开发环境，正常开发就好了。
5、发布前准备
npmignore
和 gitignore 一样
不同点在于 gitignore 是排除不需要上传到 git 仓库的文件 而 npmignore 是排除不需要上传到 npm 库的文件 他们内部的语法是一致的写上要排除的文件名或者文件夹相对目录即可
版本号的含义和控制
1.0.0
具体含义可以自行定义，以下作为参考。
0.01 小版本号的更新指的是对 api 没有改动只是修复了一些小bug
0.1.0 版本号的更新指的是对 api 有扩展扩展了一些并不影响老功能的新功能
1.0.0 版本号的更新指的是对 api 有破坏性的修改和扩展或者是大改有颠覆性的新功能影响了老api的使用的更新
npm 包的更新
以vue举例:
vue:'2.6.11' 锁死版本号 指定下载 '2.6.11' 不自动更新
vue:'~2.6.11' 更新到 'vue2.6' 的最新版本
vue:' ^2.6.11' 更新到 'vue2' 的最新版本
vue:'*2.6.1' 更新最新版的 vue
6、npm 包的发布
npm publish
私库发布
npm publish -registry 私有库地址
7、npm 包的使用
npm i xxx
全量引入
import xxx from 'xxx'
按需引入
import { apiName } from 'xxx'
