npm制作插件、发布及更新

最新推荐文章于 2025-07-19 00:18:57 发布
最新推荐文章于 2025-07-19 00:18:57 发布
阅读量521 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： json javascript ViewUI
原文链接：https://juejin.im/post/5c24c6b06fb9a049f57133d5
本文详细介绍了从零开始制作Node.js插件的过程，包括环境搭建、代码编写、测试、发布及维护等环节，适合初学者快速入门。

最近项目需要无状态的纯组件，所以我们把组件封装了一下，再制作成了插件，直接引用，把制作插件心得总结写了下来分享出来，让大家可以从零开始制作自己的插件。

制作插件

  1. 安装node及npm，之后新建一个文件夹，在终端中打开，执行命令npm init,一路回车然后输入yes即可，生成一个package.json， { "name": "swTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" },其中name就是插件的名称，默认是文件夹名字；version为版本号，注意每次发布新版本的时候需要手动更新版本号；description是描述；main是入口文件，加载这个插件时读的文件，这个也是最重要的属性，这个属性是别人引用你的插件时，读取的入口文件，在这个文件里，需要你向外暴露接口；author是作者，可以是npm注册的名字。

  2. 在根目录下新建src文件夹，里面存放的就是自己的代码片段。

  3. 在根目录下新建个 .npmignore（注意要有个.），里面就是npm在发布时会忽略项目中的文件。

  4. 在根目录下新建README.md，里面是发布到npm时项目介绍。

babel转义

因为很多语法都是ES6及以上，所以需要转义成ES5。

  1. 全局安装Babel: npm install -g babel-cli
  2. ES6转码规则: npm install babel-preset-es2015 --save-dev
  3. react转码规则: npm install babel-preset-react --save-dev
  4. ES7不同阶段语法提案的转码规则: npm install babel-preset-stage-0 --save-dev (0 - 3都可以)
  5. 根目录下新建.babelrc（同样有.）；加入规则 { "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }
  6. 一般我们是将代码写在src里面，然后将整个src转义成es5，根目录下运行代码 babel src --out-dir lib ，得到lib文件夹，就是src转义之后的文件了。
  7. 修改package.json，里面main修改为lib/index
  8. 修改.npmignore文件，增加src/ node_modules/ package-lock.json

️发布插件

  1. 没有npm账号的先去npm官网注册，官方网站是：https://www.npmjs.com/;
  2. 先修改package.json中的name，修改成你的插件名,然后在npm官网查询是否已经被注册了这个名字，有的话修改一下；
  3. 项目根目录下执行npm adduser,输入npm的账号密码还有邮箱，缺一不可；
  4. 可以运行npm whoami查看当前用户是否是自己；
  5. 运行代码npm publish进行发布；
  6. 可以在npm官网右上角点击packages查看自己发布的，有的话发布就成功啦；
  7. 在项目之中可以引进自己的插件npm install xxx --save-dev进行使用啦；

️维护插件

  1. 对插件代码功能进行了拓展或者修改，需要重新发布新版本，除了改代码之外，需要每次手动把package.json中的version进行修改，这是版本号，代表版本改动了。npm使用的版本号规则是semver语义化版本，初始化是1.0.0，依次是主版号.次版号.修订号，主版号是不相容的API修改，次版号是功能性新增，修订号是问题修正。
  2. 修改了之后再运行一次npm publish进行发布；
  3. 发布之后在运用的项目如何更新呢？（1）如果是npm，由于是自己的插件，可以知道自己的版本修改成了什么，在项目中package.json里面找到依赖包版本，手动改成最新的版本号，然后项目运行npm install --force就可以了；（2）如果是yarn，运行yarn upgrade也ok；（3）由于项目中的依赖包会发生更新，所以有时候我们会安装第三方插件进行查看，npm install -g npm-check-updates,运行ncu 查看可更新包,ncu -u更新package.json,npm install升级到最新版本即可。

再来点干货，安装插件时，--save-dev是你开发时候依赖的东西，--save是你发布之后依赖的东西。-g表示全局安装，--save-dev 可以简写为 -D ，--save 可以简写为 -S ，npm install 可以简写为 npm i。

代码已经传上github,github地址，欢迎大家访问 （地址：https://github.com/Songwei1029/create-plug）,有问题欢迎留言。

转载于:https://juejin.im/post/5c24c6b06fb9a049f57133d5

探索前端领域npm的插件开发教程
AI架构全栈开发实战笔记
07-23 756
本文面向具有基础JavaScript开发经验的前端工程师，详细解析如何从零开发高质量npm插件。覆盖开发环境搭建、模块设计原则、打包发布全流程，并提供可复用的工程化解决方案。fill:#333;color:#333;color:#333;fill:none;核心概念开发准备模块设计工程配置测试验证发布维护npm：JavaScript包管理工具，相当于前端领域的应用商店：模块的身份证+说明书，记录名称、版本、依赖等信息SemVer：语义化版本规范，格式为主版本.次版本.修订号。
如何编写一个 npm 插件？
止喜的博客
02-15 2550
提到写 npm 插件，很多没搞过的可能第一感觉觉得很难，无从下手，其实不然。 我们甚至写个简单的 console.log('hello word)，都是可以当成一个插件发布上去的。 其实无从下手的主要难点还是在于你的具体要做的功能逻辑，这个理清楚了，写插件并没有想象的那么难。 接下来，我们来看下具体插件编写的思路。 一、webpack 和 rollup ...
npm插件制作（全网最全教程~）
醉逍遥neo的博客
03-10 7233
一、npm npm是h5前端最常用的包管理工具，官方的npm仓库（传送门），用来存储第三方包（插件），通过npm命令下载安装和管理。 npm是随着node.js一起诞生的，起初是node.js用来管理包依赖的工具，后来随着webpack这类打包工具的兴起，npm逐渐成为h5前端使用和管理第三方插件的默认平台。 二、插件 相对于js功能类的插件来说，组件插件的配置更加复杂，下面以一个ts编写的react组件为例。
npm上传自己的项目
weixin_33722405的博客
11-20 178
npm安装就不介绍了，自行度娘。本文介绍npm上传 先初始化：npm init  根据提示填完系统介绍信息（package.json）； 再登录npmjs： npm login 效果如图： 输入注册的用户名、密码、邮箱，如上图说明已经登录了。然后切换到自己的项目的跟目录，提交项目命令： npm publish 提交的项目是公共项目，是免费的，也可设置为私有项目。...
前端开发必备：npm 插件推荐与使用
最新发布
AI架构全栈开发实战笔记
07-19 592
本文旨在为前端开发者提供一份实用的npm插件指南，覆盖从基础工具到高级解决方案的全方位推荐。我们将重点介绍那些真正能提升开发效率、优化工作流程的npm包，而非简单的罗列清单。核心概念：npm工作机制解析插件分类推荐：开发、构建、测试等场景实战演示：典型插件的集成与应用高级技巧：插件组合与自定义配置未来趋势：npm生态发展方向npm：Node Package Manager，JavaScript世界的软件注册表：项目的身份证和购物清单（记录所有依赖）
Vue - npm 批量升级依赖包
iotjin的专栏
12-23 1万+
无
npm插件制作及发布基础教程
aaaaa212124的博客
09-13 280
　　最近有同事在搞npm插件，想用了这么久的npm也没有自己制作一个插件出来练一练，所以动手把之前的图片随手势移动的react组件改写成了npm插件，之前的博客地址http://www.cnblogs.com/wunan/p/5801835.html。 　　首先需要在npm官网注册自己的账号，这个在发布的时候需要关联。 　　（默认电脑已安装node及npm）之后随便在电脑上新建一个文...
npm插件开发
qq_39189369的博客
08-27 970
好久没有发文章，最近在学react，简单测试一下npm插件的打包发布，现在插件开发也是面试的一个亮点。 组件/插件 局部组件(某处使用) 全局组件(多次调用到就可以注册成全局组件（一般超过5次）) 插件(共享vue生态圈，在不同项目中只要install都可以调用) 插件开发 //这里跟组件开发一样 plugins/组件 <template> <div> <el-table ref="el-from" :data="tableData" s
创建和发布自己的NPM插件包教程
weixin_45408984的博客
06-20 964
以上步骤涵盖了创建和发布 NPM 插件的基本流程。希望这个教程对你有帮助！
npm基于vite制作自己的npm包+ts超详细
07-28
最后，通过`npm publish`命令将项目发布到npm仓库，其他开发者就可以通过`npm install`或`yarn add`命令来安装并使用这个自定义播放器组件。 总结来说，这个项目展示了如何利用现代前端技术栈，包括Vue3、...
制作并发布一个Vue组件npm包
caoluotuo的博客
01-24 1728
创建npm账户（若是已经有账号此步可跳过） 需要您在npm官网中创建一个账号并登录 npm 账号注册 npm adduser 根据提示依次填写自己的用户名、密码、邮箱 成功之后，npm会把认证信息存储在~/.npmrc中，可查看npm当前使用的用户： npm whoami npm登录，可以命令方式登录或者官网登录 4.1 命令方式，根据提示依次填写自己的用户名、密码、邮箱 npm login 4.2 官网链接登录 https://www.npmjs.com/ 创建npm组件并发布到
npm 插件 制作 发布 更新
Sukla的博客
12-28 2015
1，插件功能 是一个消息弹窗 效果如图   2，创建package 自己新建一个目录 view-toast-m-m 在 view-toast-m-m 目录下执行  npm init 会在目录下生成 package.json 文件 3，编写插件 新建目录 view-toast-m-m /src/lib  view-toast-m-m /src/lib 目录下创建 vue-toa
如何开发一个npm插件，并发布到npm官网
xyphf的博客
12-06 5366
www.npmjs.com 创建一个vue-toast-demo目录 进入目录 cd vue-toast-demo npm初始化  npm init package name: (vue-toast-demo)  // 插件名 version: (1.0.0)                // 插件版本 description: a toast plugin for mobile // ...
npm及其插件升级
热门推荐
SanJiK的博客
03-27 1万+
今天在新建Vue项目项目的时候，发现Vue在命令行中提示有最新版本，于是学会了如何升级npm及其插件的方法： 升级Npm npm install -g npm 全局升级插件（以Vue-cli为例） npm update vue -g 局部升级（项目内部升级） npm update axios --save 欢迎访问我的博客了解更多...
npm 更换插件版本_发布和升级npm插件
weixin_36465618的博客
02-08 1785
发布npm插件0、注册账号去这里注册一个自己的账号1、添加账号在命令行执行命令：npm adduser --registry http://registry.npmjs.org然后根据提示添加注册时候用的 用户名、密码、邮箱。2、本地书写package.json使用npm init命令添加本地的package.json，根据提示填写，比如如下所示：{"name": "react-native-zk...
npm查看（通过安装高效升级插件）、卸载、安装 elementui最新版本
ShawnRogers的博客
09-19 1227
安装高效升级插件 npm install -g npm-check-updates 查看最新的版本：npm-check-updates 简写：ncu 卸载之前的element-ui版本 npm uninstall element-ui 安装想要安装的版） npm install element-ui @2.6.3-S
【制作npm包5】npm包制作完整教程，我的第一个npm包
a942242856的博客
08-13 1884
本文涉及知识较多，建议认真阅读前面的文章。 可以看得到分别导出了`commonjs`，`es`，`ts类型`这几个配置。当我们在一个项目当中执行`import { xxx } from "vue"` 的时候，实际上是从`package.json`文件当中找到他的`name`这个属性，这里 `from “vue”`这个`vue`就是配置文件当中的名字。
npm-开发自己的包并发布
qq_52031408的博客
12-18 567
npm包编写及发布
npm修改保存插件以及缓存地址
qq_35699215的博客
09-23 1473
npm修改保存插件以及缓存地址 设置npm全局包下载路径 npm config set prefix "D:\Program Files\nodejs\node_global" 设置npm缓存路径 npm config set cache "D:\Program Files\nodejs\node_cache"  ...
制作插件生成器
05-07
<think>好的，我现在需要帮助用户解决如何制作一个插件生成器的问题。用户之前已经讨论过插件生成器的基本概念、选择方法以及一些现有的工具，比如MyBatis Plus生成器、Material IDs Random Generator等。现在用户明确表示想自己开发一个插件生成器，需要了解相关的工具、框架和教程。 首先，我需要确定用户的需求。用户可能是一名开发者，希望创建自己的插件生成器，可能是为了特定平台或框架，比如Office插件、IDE插件等。用户需要知道整个开发流程，包括技术选型、核心模块设计、开发工具、教程资源等。 接下来，我需要整理相关的知识点。开发插件生成器通常涉及模板引擎、代码生成、配置文件处理等。可能需要使用到Yeoman这样的生成器框架，或者自定义脚本。同时，用户可能需要了解如何集成目标平台的API，比如Office插件的开发可能需要Office JS API。 然后，考虑用户可能需要的步骤。首先，确定目标平台和插件类型；其次，设计生成器的架构，包括模板管理、用户输入处理、文件生成等；然后选择合适的技术栈，比如Node.js、Yeoman、Handlebars等；接着开发核心功能，处理用户输入，生成代码和配置文件；最后进行测试和优化。 还要注意用户提到的引用中的内容，比如YO OFFICE生成器，这可能是一个示例，用户可能对Office插件生成器感兴趣，但需要确认。但根据用户当前的问题，更关注的是通用的插件生成器开发方法，而不仅仅是Office插件。 可能还需要提供一些具体的代码示例，比如使用Yeoman创建生成器的步骤，或者如何利用模板引擎生成代码。此外，用户可能需要了解如何打包和发布生成器，以及文档编写的最佳实践。 另外，用户可能对现有框架和工具感兴趣，比如Yeoman、Plop等，这些可以简化开发过程。同时，需要考虑如何扩展生成器的功能，比如支持不同的配置选项、插件类型等。 最后，确保回答结构清晰，分步骤说明，并提供相关资源和示例，帮助用户逐步理解和实施开发过程。同时，生成相关问题，引导用户深入学习和解决可能遇到的挑战。</think>### 如何制作插件生成器：开发工具、框架与教程 开发一个插件生成器需要理解目标平台的插件机制、代码生成逻辑和自动化流程设计。以下是完整的开发指南： --- #### 一、核心开发步骤 1. **明确目标平台与插件类型** - 确定生成的插件类型（如 VSCode 扩展、Office 插件、IDE 工具等） - 研究目标平台的插件开发规范（如 VSCode 的 `package.json` 配置、Office 的 `manifest.xml` 文件） 2. **选择技术栈** - **生成器框架**： - **Yeoman**：基于 Node.js 的标准化生成器框架（如 [generator-office](https://gitcode.com/gh_mirrors/ge/generator-office)）[^1] - **Plop**：轻量级代码生成工具，适合小型项目 - 自定义脚本（Python/Node.js） - **模板引擎**： - Handlebars、EJS（动态生成代码） - Mustache（简化变量替换） - **文件操作库**： - `fs-extra`（Node.js 文件系统增强） - `glob`（文件路径匹配） 3. **设计生成器架构** ```text ├── 用户输入 → 参数解析 → 模板渲染 → 文件生成 → 后处理 └── 配置文件管理（如预设模板、规则校验） ``` 4. **开发核心功能** - **交互式命令行**：使用 `Inquirer.js` 收集用户输入（如插件名称、功能选项） - **模板管理**： ```javascript // 示例：Handlebars 模板渲染 const template = fs.readFileSync('template.hbs', 'utf8'); const rendered = Handlebars.compile(template)({ pluginName: 'demo' }); fs.outputFileSync('output/demo.js', rendered); ``` - **自动化配置生成**： - 根据用户选择生成 `manifest.json` 或 `webpack.config.js` - 集成平台 API（如 Office JS API）的初始化代码 5. **测试与优化** - 使用 `Jest` 或 `Mocha` 编写单元测试 - 实现错误回滚机制（如生成失败时清理临时文件） --- #### 二、具体实现案例（以 Yeoman 为例） 1. **安装 Yeoman** ```bash npm install -g yo ``` 2. **创建生成器项目** ```bash mkdir generator-myplugin && cd generator-myplugin npm init npm install yeoman-generator ``` 3. **编写生成器逻辑** ```javascript // generators/app/index.js const Generator = require('yeoman-generator'); module.exports = class extends Generator { async prompting() { this.answers = await this.prompt([{ type: 'input', name: 'pluginName', message: '插件名称' }]); } writing() { // 复制模板文件 this.fs.copyTpl( this.templatePath('**/*'), this.destinationPath(this.answers.pluginName), { name: this.answers.pluginName } ); } }; ``` 4. **创建模板目录** ```text generators/ app/ templates/ package.json src/index.js ``` --- #### 三、进阶功能开发 1. **多模板支持** ```javascript // 根据用户选择加载不同模板 prompting() { this.answers = await this.prompt([{ type: 'list', name: 'templateType', message: '选择插件类型', choices: ['基础版', '高级版'] }]); } writing() { const templateDir = this.answers.templateType === '基础版' ? 'basic' : 'advanced'; this.fs.copyTpl( this.templatePath(`${templateDir}/**/*`), this.destinationPath(this.answers.pluginName), this.answers ); } ``` 2. **集成 CI/CD 流程** - 自动生成 GitHub Actions 配置文件（`.github/workflows/build.yml`） - 添加 `eslint` 和 `prettier` 代码规范模板 3. **插件市场对接** - 生成符合平台规范的发布包（如 VSCode 的 `.vsix` 文件） - 自动化提交到 NPM 或私有仓库 --- #### 四、学习资源推荐 1. **官方文档** - [Yeoman 生成器开发指南](https://yeoman.io/authoring/) - [Office 插件开发文档](https://learn.microsoft.com/zh-cn/office/dev/add-ins/) 2. **开源项目参考** - [generator-office](https://gitcode.com/gh_mirrors/ge/generator-office)：Office 插件生成器实现[^1] - [vue-cli](https://github.com/vuejs/vue-cli)：大型生成器架构设计范例 3. **工具链** - **调试工具**：VS Code + Node.js Inspector - **性能优化**：使用 `mem-fs-editor` 加速文件操作 --- ### 相关问题 1. 如何实现生成器与目标平台 API 的版本兼容性检测？ 2. 在生成器中集成第三方库依赖自动安装的最佳实践是什么？ 3. 如何设计插件生成器的可视化配置界面？ 4. 生成器如何支持多语言（中英文）模板切换？ 通过以上流程，您可以逐步构建出适应特定需求的插件生成器工具。建议从一个简单场景入手，逐步迭代功能模块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值