開發一個可發布到 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. 配置打包工具

推薦使用 Rollup 或 Webpack 打包（支持 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 link，npm 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  # 在包目錄取消全局鏈接