从NPM发包到RELEASE控制版本

我们平时在工作中，经常会遇到重复组件或函数的情况。一般情况下，可以通过封装组件或函数集合的方式，再以CV来使用。但如果涉及到多个项目使用，就可能会产生同时修改多个文件的需求。这个时候，我们就可以通过新建一个npm包，并上传到npm官网或者其他网站(github)的方式，来实现版本控制和灵活使用。

1、什么是npm包

npm（“Node 包管理器”）是 Node.js 的默认程序包管理器。npm包就是符合这个管理器规范的一个程序包，主要通过package.json去控制一些版本信息。

2、如何制作一个npm包

首先，我们得新建一个node项目。

第一步、npm init ,根据提示，完成一些参数的选择。如图，我们可以先一路回车，选择默认值，之后到项目的package.json里面去修改。

我这边新建的项目，会用到vue3和webpack，完成一个简易的vue3的hook方法包，整篇文章的讲解的代码地址如果需要，可以联系我。所以，我这边先贴上部分对应的代码，作为参考。

package.json 文件

{
  "name": “vue3-xxx",  // 项目名称
  "version": “1.3.0", // 版本号
  "description": "some vue3 hooks”, // 描述
  "main": “dist/index.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
  },
  "author": "lxw",
  "license": “MIT", // 凭证
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
     "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "webpack": "^3.6.0"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/xxx/xxx"
  }
}

其中，重要的main属性，项目的入口文件。首先，可以是项目里的src/index.js。但我这边，是需要打包的，那就把入口文件改到dist下的index.js。

凭证license要选择MIT，然后，里面的内容都是固定的，只需要修改一下名字就行，代码就不贴了。

Webpack.config.json

var path = require('path')
var webpack = require('webpack')
var externals= process.env.NODE_ENV == "development" ? [] : [
  "vue"
];
module.exports = {
  entry:  "./src/index.js",
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'index.js',
    library: 'npm-up',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  //在打包时需要排除的环境包。
  externals: externals,
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ]
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

需要注意的是，entry是程序的本身读取的入口；output，就是指定打包到dist文件夹。

然后，运行npm run build，得到打好的包。

3、发布包

首先得有账号，需要去注册，命令行登录 npm login，如图显示：

则登陆成功，如果遇到链接失败的话，就是网络的原因了。

发布 npm publish

可能会因为名称重复等原因失败，删除包npm unpublish <包名> -force，重新提交。

4、包的版本管理

既然我们的项目发布到了node上面，那它的版本维护也就不能忽视了。但根据我查看一些比较知名的库的npm页面来看。

npm方面，只能作为简单的记录版本号，其记录的信息比较少，所以是不能满足我们的需求的。既然npm不行 ，那我们就转换下思路，在其关联的git仓库实现我们需要的功能。

那要如何使用呢？

1、Release

Release的定义，是具有changelogs和二进制文件的一级对象，它可以代表超出Git架构本身的一个特定时间点之前的所有项目历史。也就是通过release，不但能够通过源码体现出项目历史，还能通过已经编译好的二进制文件来进一步描述此时的项目状态。

在深入理解release是什么之前，我们需要先知道tag是什么。

tag： 中文名：标签 tag是git给我们提供的用于管理记录版本的功能。比如，我每次在提交时，需要将其设定一个版本（2.0.0）

git tag v2.0.0

同时将其记录下来，推送到远程

git push origin --tags 或者 git push origin v1.0.0

在我需要翻看之前的记录（1.0.0，。。）的时候，我就都能查看到。

git show v1.0.0

release： 则是脱离了 git 本身概念的功能，可以说是代码托管平台（github等）提供的更高层的服务。一般在提交时，会要求填写 tag 名、分支以及相应的发布说明，还可上传编译好的程序、打包好的文件等。 就是在上述TAG的功能上，它额外的提供添加编译好的二进制文件以及其他更多信息等。可以让用户在托管平台，以可视化的方式，获取更多的版本信息。比如elementUI的release功能。

2、使用releases-it、changelog管理版本号、上传

releases-it是集成了一套发布流程的工具。它的大致流程包括： 默认模式：

• 切换版本（例如package.json中）
• Git提交、标记、推送
• 使用挂接执行任何（测试或构建）命令
• 在GitHub或GitLab创建发布
• 生成更改日志
• 发布到npm
• 管理预发布
• 使用插件扩展
• 从任何CI/CD环境中发布

先安装releases-it

npm i -D release-it

然后，在package.json中，加入命令

"scripts": {
     "release": "release-it"
   }

之后在根目录下，新建.release-it.json文件，作为配置项。

{
    "github": {
      "release": true
    },
    "git": {
      "commitMessage": "release: v${version}"
    },
    "npm": {
      "publish": true // 是否发不到npm
    },
    "hooks": {
      "after:bump": "echo 更新版本成功"
    },
    "plugins": {
      "@release-it/conventional-changelog": {
        "preset": "见文件",
        "infile": "CHANGELOG.md"
      }
    }
  }

此时，直接运行命令是默认操作。默认情况下，release-it是交互式的，允许您在执行每个任务之前进行确认,但我们通过使用--ci选项，该过程完全自动化，无需提示。将执行配置的任务，如下面第一个动画所示。在持续集成（CI）环境中，此非交互模式将自动激活。

或者使用--only-version可以仅使用提示符来确定版本，并自动执行其余操作。

到这边，简单的配置已经完成了，那我们如何使用呢？

一般情况下，在我们变更了部分代码，需要上传代码，都要先提交再推送到代码服务器。但我们这边，先commit,不要push。

git add .
git commit -m 'feat: release-it'

• 此处再推荐一个git提交规范工具，帮助我们更清晰的了解每次提交的内容。 安装git-cz，规范commit信息:

  npm install git-cz -D
  

  然后，修改npm scripts 增加 "commit": "git-cz"

  

如图显示，可以选择几个命令格式。然后就是根据提示，完成下面的步骤。

最后再运行

npm run release 

CHANGELOG.md用来记录版本信息的log；package.json中，改变了版本号。

显然这边虽然生成了CHANGELOG.md，但并没有记录下来。于是我们需要借助一个工具,安装一下即可。

npm i @release-it/conventional-changelog -D

如何所示，这就是CHANGELOG.md里的内容。

同时，npm包上传成功后，也会有对应版本号显示。

4、总结

这篇文章简单讲解了如何在npm上发布一个包，并且使用 rēlease-it 实现版本控制。其实它们还有很多用法和细节没讲到，后续我也会继续学习，希望可以和大家一起进步🦍。（纯粹个人学习记录，都只是些学习总结😂，有不对的地方，还希望达大佬指出，谢谢！）