总结：如何将包上传包文件到npm

之前都是面向业务做一些编程工作。

现在组织结构调整了，我面向的用户是面向业务的不同部门的程序员同事，在基建部门做编写的工具类、组件库，需要打包之后发布到npm，让同事使用。

所以今天来总结一下，一个简单的工具包在打包之后怎么传到npm上。

创建简单的项目

我们先通过rollup新建一个项目。

需要依赖相关的安装包如下：

@babel/cli
@babel/core
@babel/polyfill
@babel/preset-env
core-js
regenerator-runtime
rollup
rollup-plugin-babel
rollup-plugin-commonjs
rollup-plugin-json
rollup-plugin-node-resolve
rollup-plugin-terser

通过npm init -y，以及安装好上述的插件之后，项目的文件结构如下：

|- node_module
|- src
|- package.json
|- README.md
|- rollup.config.js

我打算在src文件夹下面创建index.js文件，用来编写我需要打包的工具方法。以一个很简单的计算方法为例，index.js文件的内容是这样的:

export default class LzSlefFunc {
  static add(a, b) {
    return a + b;
  }
  static subtraction(a, b) {
    return a - b;
  }
}

上面的工具方法是一个加法运算和减法运算，编写到这里差不多就足够了。

然后是编写rollup的打包方法，核心的配置如下，如果不是特别清楚的同学可以看一下rollup的官网，用法跟webpack差不多。

export default {
  input: 'src/index.js',
  output: [{
    file: 'dist/index.es.min.js',
    format: 'es',
  },{
    file: 'dist/index.min.js',
    format: 'iife',
    name: 'Cdss'
  }],
}

入口文件是src/index.js，输出的文件在dist文件夹下面，输出了两种类型的文件，一种是支持es6语法的文件，一种是iife的文件。

在package.json中配置scripts的快捷执行命令，完成项目的打包:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c ./rollup.config.js"
},

ok，执行完成以上步骤之后，就能得到我们打包之后的两个文件了。

修改上传到npm的文件配置

我在npm的远端创建了一个叫做labnpm的组织，希望将我刚刚的那个项目放在这个组织下面（不知道怎么创建npm组织的朋友先百度一下）。

现在需要给我这个项目提供一个命名，我暂时叫他lz-caculate-function吧，随意起的。然后我想要把这个项目上传之后就到labnpm这个组织下面。

于是，我在package.json的配置如下：

{
  "name": "@labnpm/lz-caculate-function",
  "version": "1.0.0",
  "main": "dist/index.es.min.js",
  "files": [
    "dist/*"
  ],
 "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
  }
}

在上面的name上命名需要带上自己的组织名，然后version就是上传到npm上的版本，files是需要上传到npm上的文件，publishConfig是没有在npm上购买私有空间，需要配置要上传的类型和地址。

经过上面的配置之后，再执行npm publish --access publish，命令行显示发布成功。

登录到npm官网上，验证发布成功：如这里的1.0.0版本。

给发布的版本加上tag

我们针对不同的功能需求时，在发布包的时候经常会因为一些功能的改动或者解决临时的bug，需要上传不同的包版本。那么对应不同的包版本应该对应测试版本，或者正式版本，或者升级的小版本和大版本，都有严格的规范。

这里以发布beta版本和次版本为例，执行以下步骤。

发布beta版本

首先我们需要确保当前仓库修改文件都已经发布到了远端仓库上，不然最后的上传会失败。

然后让当前的包文件统一修改版本，此时修改完版本后并且会自动上传到git远端，并且增加tag。

统一修改的方法是npm version。

常用的有以下几种操作方式：

• a、npm version 1.1.0-beta.1 直接指定版本号
• b、npm version major | minor | patch 分别代表主版本号、次版本号、补丁版。一般用的多的就是patch和minor，major基本用不到。

如上所示，修改完版本号为1.1.0-beta.1之后，即可执行npm publish --tag=beta --access publish完成文件包的上传。

再执行npm view，查看发布包的具体情况。发现上面对应版本的包上传成功了。

发布次版本

有了上面发布beta版本的流程，现在发布次版本之后就更简单了。

执行顺序如下：

• npm version 1.0.1 直接指定版本号
• 执行npm publish --access publish完成文件包的上传，不设置具体的tag就是发布正式版本了。执行npm view，查看发布包的具体情况。

最后说一下在执行包文件发布的一些问题备注。

备注

如果当前包的版本是1.1.0-beta.1，在执行npm version patch之后，版本会变成1.1.0，此时这个版本就适合发布成正式版本。

今天的内容就总结到这里。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。