在Verdaccio搭建npm私有服务器中，我们介绍了如何搭建一个Npm私有服务器；服务器搭建完成后，我们本章来学习一下如何上传我们自己的npm包。

前端模块化作为前端必备的一个技能，已经在前端开发中不可或缺；而模块化带来项目的规模不断变大，项目的依赖越来越多；随着项目的增多，如果每个模块都通过手动拷贝的方式无异于饮鸩止渴，我们可以把功能相似的模块或组件抽取到一个npm包中；然后上传到私有npm服务器，不断迭代npm包来更新管理所有项目的依赖。

npm包的基本了解

首先我们来了解一下实现一个npm包需要包含哪些内容。

打包

通常，我们把打包好的一些模块文件放在一个目录下，便于统一进行加载；是的，npm包也是需要进行打包的，虽然也能直接写npm包模块的代码（并不推荐），但我们经常会在项目中用到typescript、babel、eslint、代码压缩等等功能，因此我们也需要对npm包进行打包后再进行发布。

在深入对比Webpack、Parcel、Rollup打包工具中，我们总结了，rollup相比于webpack更适合打包一些第三方的类库，因此本文主要通过rollup来进行打包。

随着npm包越来越多，而且包名也只能是唯一的，如果一个名字被别人占了，那你就不能再使用这个名字；假设我想要开发一个utils包，但是张三已经发布了一个utils包，那我的包名就不能叫utils了；此时我们可以加一些连接符或者其他的字符进行区分，但是这样就会让包名不具备可读性。

在npm的包管理系统中，有一种scoped packages机制，用于将一些npm包以@scope/package的命名形式集中在一个命名空间下面，实现域级的包管理。

域级包不仅不用担心会和别人的包名重复，同时也能对功能类似的包进行统一的划分和管理；比如我们用vue脚手架搭建的项目，里面就有@vue/cli-plugin-babel、@vue/cli-plugin-eslint等等域级包。

我们在初始化项目时可以使用命令行来添加scope：

npm init --scope=username

相同域级范围内的包会被安装在相同的文件路径下，比如node_modules/@username/，可以包含任意数量的作用域包；安装域级包也需要指明其作用域范围：

npm install @username/package

在代码中引入时同样也需要作用域范围:

require("@username/package")

在npm包中的package.json文件，我们经常会看到main、jsnext:main、module、browser等字段，那么这些字段都代表了什么意思呢？其实这跟npm包的工作环境有关系，我们知道，npm包分为以下几种类型的包：