原文链接

在开发大型项目的时候，有时候在代码解耦层面会出现很多通用且无耦合性的组件、模块包等，这时需要将这些公共的部分提取出来在几个或者开源出来。本文就为介绍如何开发一个公共模块包

开发公共模块包需要开发者掌握几个概念

1. nodejs命令行是如何工作的
2. npm包是如何发布的
3. github是如何使用的
4. 如何更好的管理开发版本

因本文不是基础教程，故在这里不介绍nodejs、npm、github的基础使用方式

npm包结构

npm包实际是一个存档文件，即一个目录直接打包为.zip或tar.gz格式的文件，安装后解压还原为目录。完全符合CommonJS规范的包目录应该包含如下这些文件

package.json : 包描述文件。
bin: 用于存放可执行二进制文件的目录。
lib：用于存放javascript代码的目录。
doc：用于存放文档的目录。
test: 用于存放单元测试用例的代码。
复制代码

我们开发npm包模块的时候，就可以按照以上目录结构，进行开发

正式开始前的准备

• 注册github

虽然npm包开发版本管理可以不依赖github，但目前社区基本采用github+npm同时管理代码的方式，注册好自己的github后，在github上创建一个项目，博主在这里以wci-cli为例说明

• 注册npm

可以通过官网注册，也可以通过命令行注册，命令行注册方式我们后面会说明

初始化项目

• 初始化npm项目

在github创建项目wci-cli,使用git clone下载至本地，进入wci-cli项目，使用下述命令，在命令行一键回车到底

npm init
复制代码

生成package.json文件，内容如下

{
  "name": "wci-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jasonlive",
  "license": "ISC"
}
复制代码

修改package.json文件如下

{
  "name": "wci-cli", ## 项目名称
  "version": "1.0.0", ## 项目版本
  "description": "webpack、react、redux、react-router、antd", ## 项目描述
  "main": "index.js", ## 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }, ## 项目可执行脚本
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jason-live/wci-cli.git"
  }, ## 项目代码存放目录，一般为github目录地址
  "author": "jasonlive", ## 项目拥有着
  "license": "ISC",
  "bin": {
    "wci": "./bin/wci"
  }, ## 项目可执行bash命令
  "bugs": {
    "url": "https://github.com/jason-live/wci-cli/issues"
  },
  "homepage": "https://github.com/jason-live/wci-cli#readme", ## 项目说明路径，一般为github上的README.md文件
  "dependencies": {} ## 项目依赖
}
复制代码

在项目目录下创建如下文件|文件夹

bin ## 可执行文件目录
lib ## 打包的代码目录
src ## 源码目录
doc ## 文档目录
boilerplates ## 模版文件目录
.gitignore ## 忽略文件，npm会默认识别这个文件
复制代码

我的第一个命令

在bin目录下，新建wci文件，修改文件权限chmod 755 wci，加入如下代码：

#!/usr/bin/env node

console.log('hello world');

if (process.argv.slice(2).join('') === '-v') {
  console.log('wci-cli: ' + require('../package').version);
  return;
}
复制代码

保存提交至github，提交至npm，文章前面提到注册npm可以两种方式，因博主之前注册过npm账号，故这里采用npm login方式

npm login
Username: jasonlive
Password:
Email: (this IS public) 15161461631@139.com
Logged in as jasonlive on https://registry.npmjs.org/.
复制代码

填写用户名、密码、邮箱，登录后，使用npm who am i查看是否登录成功，使用npm publish，即可将代码提交至npm

使用命令

npm i -g wci-cli ## 从npm上安装自己的npm包
复制代码

显示安装成功，使用 wci|wci -v

出现如下提示，说明可以使用 讲到这里，我们之前新建的项目目录结构大部分还未使用，我们将在后续文章中继续为大家讲解，并带着大家一步步构建一个可以使用的npm命令行工具