JS开发node包并发布流程

开发一个可发布到 npm 的 JavaScript 插件,需要遵循标准的开发、测试、打包和发布流程。以下是详细步骤指南:


1. 初始化项目

创建项目目录并初始化 package.json

mkdir my-js-plugin
cd my-js-plugin
npm init -y
  • 手动修改 package.json,确保包含必要字段:
    {
      "name": "my-js-plugin",  // 插件名称(npm 唯一)
      "version": "1.0.0",      // 初始版本
      "description": "A JavaScript plugin for XXX",
      "main": "dist/index.js", // 入口文件(需编译后路径)
      "scripts": {
        "build": "rollup -c",  // 打包命令(示例用 Rollup)
        "test": "jest"        // 测试命令
      },
      "keywords": ["plugin", "javascript", "npm"],
      "author": "Your Name",
      "license": "MIT",
      "dependencies": {},
      "devDependencies": {}
    }
    

2. 开发插件代码

创建源码文件(ES6+ 语法)

mkdir src
touch src/index.js
  • 示例插件代码src/index.js):
    export default class MyPlugin {
      constructor(options) {
        this.options = options;
      }
    
      greet() {
        console.log(`Hello, ${this.options.name || 'World'}!`);
      }
    }
    

3. 配置打包工具

推荐使用 RollupWebpack 打包(支持 ES Module 和 CommonJS)。

安装 Rollup(示例)

npm install rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev

创建 Rollup 配置文件(rollup.config.js

import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.js',
      format: 'umd',       // 兼容 CommonJS 和浏览器
      name: 'MyPlugin',    // 全局变量名
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',      // ES Module
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' }),
  ],
};

配置 Babel(babel.config.json

npm install @babel/core @babel/preset-env --save-dev
{
  "presets": ["@babel/preset-env"]
}

运行打包

npm run build
  • 生成的文件在 dist/ 目录下。

4. 添加单元测试

安装 Jest

npm install jest --save-dev

创建测试文件(test/index.test.js

import MyPlugin from '../src/index';

test('MyPlugin should greet correctly', () => {
  const plugin = new MyPlugin({ name: 'Alice' });
  expect(plugin.options.name).toBe('Alice');
});

运行测试

npm test

5. 准备发布

1. 注册 npm 账号

  • npm 官网 注册账号。
  • 在终端登录:
    npm login
    

2. 检查 package.json 关键字段

  • name: 确保唯一性(可在 npm 官网搜索验证)。
  • version: 遵循 语义化版本(如 1.0.0)。
  • main: 指向打包后的入口文件(如 dist/index.js)。

3. 添加 .npmignore(可选)

忽略不需要发布的文件(类似 .gitignore):

src/
test/
rollup.config.js
babel.config.json

6. 发布到 npm

npm publish
  • 首次发布需验证邮箱。
  • 更新版本时:
    npm version patch  # 更新补丁版本(1.0.1)
    npm publish
    

7. 后续维护

  • 版本管理
    • npm version major|minor|patch 更新版本号。
  • 文档
    • README.md 中写明用法、API 和示例。
  • 持续集成
    • 可配置 GitHub Actions 自动测试和发布。

8.完整目录结构

my-js-plugin/
├── dist/                # 打包后的文件
│   ├── index.js         # UMD 格式
│   └── index.esm.js     # ES Module 格式
├── src/
│   └── index.js         # 源码
├── test/
│   └── index.test.js    # 测试代码
├── package.json
├── rollup.config.js
├── babel.config.json
└── README.md

9. 本地调试和测试

在 npm 包未上传到 npm 仓库之前,可以进行本地调试和测试,使用 npm linknpm link 可以在本地创建符号链接,使得项目可以直接引用本地开发的 npm 包,而无需发布到 npm,步骤如下:

  1. 在 npm 包目录下运行 npm link

    cd /path/to/your-package
    npm link
    

    这会在全局 node_modules 中创建一个软链接,指向你的本地包。

  2. 在项目中链接该包

    cd /path/to/your-project
    npm link your-package-name
    

    这样,项目中的 node_modules/your-package-name 会指向本地包目录。

  3. 测试修改

    • 修改本地包代码后,项目会自动获取最新更改,无需重新安装。
    • 适用于快速迭代开发。
  4. 取消链接

    npm unlink your-package-name  # 在项目中取消链接
    cd /path/to/your-package && npm unlink  # 在包目录取消全局链接
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值