NPM开源模块贡献指南(下)—— 实际开发

上篇文章中,我们列举了几个开发前需要思考的问题,现在,让我们实际上手来开发一个npm包。前阵子刚刚在github开源了一个js解析ipa、apk安装包信息的库 —— app-info-parser ,我们就以它为例,讲讲一个NPM包是如何一步步写出来的。

首先是几个问题的思考,直接列出结果:

  • 模块是提供给浏览器环境还是Node环境使用?

    兼容浏览器和Node环境

  • 准备使用什么语法特性来编写模块?

    es6/es7

  • 是否需要编译为兼容性更好的版本?

    兼容到es5

  • 是否需要打包成一个单独的可引用文件?

  • 哪些文件需要推送到NPM,哪些不需要?

    Y为需要,N为不需要
            app-info-parser
    N   ├── node_modules
        │   └── ...
    N   ├── dist                // 打包后的文件存放目录
    N   │   └── app-info-parser.min.js
    N   ├── src                    // 源代码目录
        │   └── ...
    Y   ├── lib                    // 编译后的代码目录
        │   ├── ...
    N   ├── .npmignore
    N   ├── .gitignore
    N   ├── .babelrc            // babel语法转换配置
    Y   ├── package.json
    Y   ├── LICENSE                // 开源证书
    Y   ├── README.md            // 接入文档
    Y   └── CHANGELOG.md        // 更新日志
    
  • 如何引入及管理模块自身的依赖?

    为了方便理解,我们在后面的步骤中依次安装

开发

1. 初始化仓库

mkdir app-info-parser
cd app-info-parser
mkdir src && touch src/index.js # src即为存放源码的地方
npm init

按照提示补充相应的信息:安装包的名称、版本、描述、关键字(供搜索用)、入口文件、作者和证书后,npm会在项目目录下生成 package.json 文件

{
  "name": "app-info-parser",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js", // 入口文件的位置,reqiure('app-info-parser')实际引入的文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ipa",
    "apk",
    "parser"
  ],
  "author": "QuincyChen",
  "license": "MIT"
}

2. 配置eslint代码检查

# 项目根目录下执行命令, 需要全局安装eslint (npm install eslint -g)
eslint --init
# 建议直接选择 Standard 代码规范,也可以自行配置

按提示执行完命令后,会自动在项目内安装dev依赖,以及自动生成 .eslintrc.js 配置文件

3. 配置 babel 打包 es6/es7 为 es5

新建 .babelrc 文件

{
  "presets": ["es2015"]
}

安装babel依赖, 同样是dev依赖

# babel依赖
npm install -D babel-cli babel-core babel-loader babel-preset-es2015

package.jsonscripts 中补充打包命令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "babel src -d lib" // 将src目录下的代码打包到lib下
}

之后每次发版前,我们需要执行 npm run build 命令来将代码打包成兼容es5的版本

4. 浏览器端的babel打包

我们知道在Node端和浏览器端很多API是不同的,如何兼容Node端和浏览器端?这时候我们可以使用 browserify 来将Node端代码打包成兼容浏览器的版本。

package.json 中补充打包命令

"scripts": {
    "test": "node ./example/node.js",
    "build": "rimraf src && babel lib -d src",
    "build:browser": "browserify src/index.js -t [ babelify ] -s AppInfoParser -d | exorcist ./dist/app-info-parser.js.map | derequire > dist/app-info-parser.js"
  }

安装打包依赖

npm install -D browserify derequire exorcist

之后我们使用即可使用 npm run build:browser 命令,将代码打包成浏览器可通过script标签单独引入的文件 app-info-parser.js (输出变量名为 AppInfoParser),我们可以进一步对代码文件做压缩处理

补充压缩命令

"scripts": {
    "test": "node ./example/node.js",
    "build": "rimraf src && babel lib -d src",
    "build:browser": "browserify src/index.js -t [ babelify ] -s AppInfoParser -d | exorcist ./dist/app-info-parser.js.map | derequire > dist/app-info-parser.js",
    "minify": "uglifyjs ./dist/app-info-parser.js -o ./dist/app-info-parser.min.js -c -m --source-map \"url='./dist/app-info-parser.mini.js.map'\""
  }

安装压缩命令依赖

npm install uglifyjs -D

使用 npm run build:browser && npm run minify 命令即可打包浏览器可用的压缩文件到 dist 文件夹下

5. 配置推送到NPM / Git 仓库的内容

新建 .npmignore 文件

.vscode
.eslintignore
.eslintrc.js
.gitignore

node_modules/
dist/
src/

package-lock.json
yarn.lock

新建 .gitignore 文件

.vscode
node_modules/
lib/

package-lock.json
yarn.lock

6. 开始造作

以上工作准备完成后,就可以在 src 目录下进行你的开发工作,完成开发后只需要运行对应的命令即可完成打包

发版

1. 注册NPM帐号(已有忽略)

npm addUser # 按照提示完成帐号注册

2. 登录NPM帐号

npm login

3. 将包发布到NPM

# npm包名、版本号不能重复
npm publish

总结

以上即为开发一个NPM包的流程,中间的一些步骤可根据开发前的问题思考结果自行删减。

0%