前端框架

06 06月

前端脚手架：nodejs插件开发与发布

2021-06-06 前端框架

本文主要介绍如何快速创建nodejs插件并发布到npm上。npm是一个让JavaScript程序员分享和复用代码的工具，我们不仅可以install别人的插件，也可以publish自己的代码。

nodejs插件开发与发布

npm是什么？

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

类似于Java中的Maven，Ubuntu中的apt-get, Ruby中的Gem, Python中pypi等…

npm 由三个独立的部分组成：

  • 网站：是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。
  • 注册表（registry）：一个巨大的数据库，保存了每个包（package）的信息。
  • 命令行工具 (CLI)：通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

npm官方网站：https://www.npmjs.com/

 

npm能做什么？

将独立的模块构建成插件，在后期项目中可以像搭积木一样组装需要的模块，避免重复造轮子。

创建一个包

初始化

创建插件目录dev-localstorage，进入目录，使用npm init --yes默认方式初始化nodejs插件，命令窗口命令如下：

mkdir dev-localstorage
cd dev-localstorage
npm init --yes

执行后将在插件目录下生成package.json文件，内容如下：

{
  "name": "dev-localstorage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/QuintionTang/dev-localStorage.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/QuintionTang/dev-localStorage/issues"
  },
  "homepage": "https://github.com/QuintionTang/dev-localStorage#readme"
}

相关字段说明，更多属性参见官方文档

  • name：插件的名字
  • version：插件版本号
  • description：插件描述
  • author：作者名
  • main：入口文件路径，require(name)将根据这个路径来引入
  • keywords：关键词，使用数组形式，方便npm官网搜索
  • scripts：命令行，通过npm run执行
  • license：许可证书，一般开源是MIT
  • repository：github仓库项目地址

创建代码

在入口文件index.js创建要实现的代码：

const devLocalStorage = (valKey = "authorization") => {
    const MAIN_KEY = "devpoint.";
    const localKey = `${MAIN_KEY}${valKey}`;
    const save = (data) => {
        console.log(`调用方法save: ${localKey}`);
    };

    const get = () => {
        console.log(`调用方法get: ${localKey}`);
    };
    /**
     * 清楚localStorage
     */
    const clear = () => {
        console.log(`调用方法clear: ${localKey}`);
    };
    return {
        save,
        get,
        clear,
    };
};

module.exports = devLocalStorage();

使用module.exports导出对象，在nodejs环境下，通过以下方式调用：

const devLocalStorage = require("dev-localstorage");
devLocalStorage.save("Devpoint");
devLocalStorage.get();
devLocalStorage.clear();

发布

插件开发完了，要把它发布到npm官网上，才能在其他项目中引用。
首次发布，需要在npm官网上注册账号，下次直接npm login进行登录。

$ npm adduser //注册账号
Username: YOUR_USER_NAME
Password: YOUR_PASSWORD
Email: YOUR_EMAIL@domain.com
$ npm publish . //发布

如果登录报405错误，可以在项目目录下添加文件.npmrc，内容为： registry=https://registry.npmjs.org

现在，在npm官网上输入dev-localstorage（https://www.npmjs.com/package/dev-localstorage）便可以搜到发布的包，通过npm install dev-localsorage将插件安装到自己的项目。

如果发现插件有bug了，修改后想要重新发布，直接执行npm push .会报错，这是由于npm检查到发布的version版本已经存在，所以需要更新你的版本号才能重新发布，此时需要以下命令：

npm version patch

此时package.json的version字段由1.0.0提升至1.0.1，再执行npm publish，可以看到npm官网版本的更新。

以上是nodejs插件发布的简单流程，实际上nodejs插件开发还包含很多场景，一个大型的项目还需要考虑单元测试、代码压缩、集成测试等等。

大型nodejs插件目录结构

一个完整的nodejs插件目录结构一般如下：

.
├── bin                         #运行目录
├── lib                         #主代码目录
├── example                     #示例目录
├── test                        #测试目录，提供单元测试
├── .travis.yml                 #集成自动测试配置
├── .npmignore                  #npm发布时忽略的文件
├── CHANGELOG.md               #版本更新说明
├── LICENSE                     #许可证书
├── package.json                #npm配置
├── README.md                   #README

完

npm