项目github地址

npm篇

在工作中，模块之间都会有一些类似或者相同的东西，而作为程序员我们要把重复的代码提炼（抽象）出来，封装成函数，供几个模块之间调用，使代码更加优雅，同是提高自己的抽象编程能力。随着经验的增长，会发现项目与项目之间也有一些类似或者相同的东西，那么我们如何抽取，抽取出来的函数如何被各个项目使用呢？我们可以借助npm包来实现，例如我们平时用到的react、vue、antd等等。

快速入门

接下来介绍一下npm包从0-1的搭建过程

首先要有一个npm账号，去npm官网注册，要记住自己的账号密码，发包之前需要先登录。
新建一个文件夹，用来存放代码。
npm init生成项目package.json，一路默认即可，后期都是可以修改的（快捷方式：npm init -y 生成默认package.json）

4. 在根目录下新建index.js文件（因为package.json配置的入口文件是index.js）

5. 随便编写一段代码

6. npm login 登录官方npm

7. npm publish发布（注意：发布前npm源要切到官方的源 npm config set registry=http://registry.npmjs.org）

8. 可以在npm官网看到自己发布的所有的包

9. 发布成功之后，别人就可以通过 npm install <包名> 来安装使用你的包了。

10. 到这里就结束了，是不是很简单。但是我们平时写的代码是比较复杂的，还会用到react、vue、ES6、TS等等，还需要兼容多种平台，这就需要理解【模块】的概念，以及对源码做打包编译的处理。在系列文章(2)中我们会介绍。

如何更新包？

首先来看几个 npm 命令。

npm view <package_name> versions 该命令是查看包的版本，会打印出该包的发布版本。

npm version <update_type> 更新本地包版本

　　其中 update_type 有三个值：

　　patch（打补丁，版本会从 1.0.0 更新到 1.0.1，只是第三位增长）

　　minor（小修改，版本会从1.0.0 更新到 1.1.0，更新的是第二位）

　　major（较大的改动，版本从 1.0.0 更新到 2.0.0，更新的是第一位）

当我们要更新包时，先将代码修改完毕，然后执行 npm version <update_type>

然后发布 npm publish 即可。

如何删除包？

npm unpublish [<@scope>/]<pkg>@<version> // 删除某个版本的包
npm unpublish [<@scope>/]<pkg> --force // 删除整个包

项目用github托管

多人合作或者你想做代码版本控制，那么你就需要有一个地方可以长期稳定的存储你的代码，你需要建一个git仓库来存放，可以自行选择一个平台（githug、gitlab等），这里我们推荐github，如果你还没有账号，那么快去注册一个吧！

注册githug账号，登录，新建一个git仓库
在npm-libs文件夹下git init，初始化当前目录作为git仓库
添加目录下的文件到本地仓库 git add .
提交 git commit -m "init commit"
添加远程仓库地址 git remote add origin <从git仓库上拷贝下来的下载地址，粘贴在这里>，添加成功后，可以用git remote -v查看远程仓库地址
push 本地代码到远程git仓库git push --set-upstream origin master

--set-upstream 简写 -u 本地分支关联远程分支

结束

小结

搭建私有库平台

在前端/Nodejs 开发中我们通常会开发出公共的 module，但在企业开发功能模块时并不希望将自己的核心代码发布到 npmjs.org 中，虽然 npmjs.org 提供了私有的方法，更多企业还是倾向将代码控制在内网环境中，今天我们来介绍一下npm 私有模块的3种主流方法。

方法一：git+npm link

npm install除了日常使用的下面这些方式外

npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>

aliases: npm i, npm add
common options: 
[-P|--save-prod|-D|--save-dev|-O|--save-optional] [-E|--save-exact][-B|--save-bundle] 
[--no-save] [--dry-run]

还有下面这些

npm install <git-host>:<git-user>/<repo-name>
npm install <git repo url>
npm install <tarball file>
npm install <tarball url>
npm install <folder>

For example:

npm install git+https://github.com/kongmengqian/npm-my-libs.git

执行过程&结果

再用npm link来做包的调试，具体见【调试】章节

方法二：CNPM私服

见npm私有模块的3种方法

方法三：verdaccio

见verdaccio的github

包源管理

推荐用nrm管理npm包源，当然，手动操作也是可以的，参考。

# 安装nrm
npm i nrm -g

# 查看可用包源
nrm ls

# 添加verdaccio包源，别名strong(按个人习惯定义)
nrm add strong http://yourweb:yourhost/

# 切换到verdaccio包源，切换一次，终身有效
nrm use strong

# 注册一个用户，然后愉快的开始npm操作
npm adduser

方法四：Nexus私服

见npm私有模块的3种方法

小技巧：.npmrc

配置用户名、密码和email，避免每次输入，提高效率，减少麻烦

后三种方式笔者没有尝试过，大家可以参考上述文章进行实践，后续笔者也会更新自己在实践过程中的经验。

多包管理

Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目。

还需要知道 npx 概念

调试

在/npm-libs-project目录下，执行npm link

npm link (in package dir)
npm link [<@scope>/]<pkg>[@<version>]

alias: npm ln

yarn

yarn link (in package dir)
yarn link [<@scope>/]<pkg>[@<version>]

yarn link <package_name>
yarn unlink <package_name>

For example:

cd ~/npm-libs-project
yarn link
cd ~/dev-project
yarn link npm-libs-project

Now, any changes to ~/npm-libs-project will be reflected in ~/dev-project/node_modules/npm-libs-project/. Note that the link should be to the package name, not the directory name for that package.

npm包目录下：~/npm-libs-project

项目目录下：~/dev-project

其他操作可以参考npm-link

参考文章

npm发布自己的库（快速入门板块内容参考的是这篇文章）
npm私有模块的3种方法（搭建私有库平台）
npm命令行传送门

知识拓展

npm init还有哪些用法和用途？

npm-init(npm init 后面可以带哪些参数，都是什么含义？——实际应用：npm init react-app my-app 调用create-react-app脚手架创建一个名为my-app的项目)

package.json配置项都有哪些？都是什么含义？

npm-package.json

npm其他的命令的学习

搭建一个基于 react+TS+antd 的组件库(1)