写一个自己的npm 插件包,并发布成功

6 篇文章 0 订阅
6 篇文章 0 订阅

很多人都还没有自己发布过npm包,今天我就来讲解一下,写一个最简单的npm包,并发布上去。

1、本地创建一个文件夹,并初始化项目

mkdir my-npm-demo
cd my-npm-demo
npm init

2、新建入口文件

新建入口文件index.js, 里面我们写个小函数,

module.exports = function(req) {

    console.log(req);
}

注意: 在package.json里,main必须是入口文件

3、package.json文件

name:包的名字,确保该名字是独一无二的
version:包的版本,默认是1.0.0
description:包的描述
main:入口文件,默认是index.js
test command:测试命令
repository:git仓库地址,一般为”type”:”git”,”url”:”git的url”
keyword:这个挺重要,尽量用比较贴切的关键字作为这个包的索引,这样才能有更多的人搜索到你的包
author:写你的账号或者你的github账号吧
license:开源协议用了哪个 建议用:MIT

4、LICENCE文件创建

参考链接:https://spdx.org/licenses/MIT... & https://opensource.org/licens...
新建文件名称为:LICENSE 没有后缀
内容输入参考链接里面的text内容即可。
将<year> 和 <copyright holders>修改为 对应的年份 和 版权拥有者名字

例子:

The MIT License (MIT)

Copyright (c) 2021-present xiazhipeng

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

5、发布npm包

  • 首先,注册npm账号,链接:https://www.npmjs.com
  • 其次,打开终端,到项目目录,输入:npm adduser;然后输入npm whoami,如果出现注册名字,说明成功
  • 最后,输入npm publish --access=public,即可发布成功
  • 测试是否发布成功,直接 npm install 你的包名,或者去注册账户查看
  • 如果更新版本,需要更改package.json里面的版本号,不然会报错

好了,到这里第一个npm包就发布成功了,恭喜

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例,展示如何编一个Vue3的npm插件: 1. 创建一个新的npm并初始化 首先,创建一个新的目录,然后在该目录下运行以下命令来初始化npm: ``` npm init -y ``` 这将创建一个package.json文件,其中含有关您的npm的信息。 2. 安装必要的依赖项 接下来,需要安装一些必要的依赖项,括Vue3和rollup。运行以下命令: ``` npm install --save vue@next rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser ``` Vue3是Vue.js的下一代版本,rollup是用于打JavaScript的工具。 3. 创建插件代码 创建一个名为"index.js"的文件,该文件将含您的插件代码。这里是一个简单的示例,它向Vue的全局对象添加了一个名为"myPlugin"的方法: ```js export function myPlugin() { console.log('Hello from myPlugin!'); } export default { install: (app) => { app.config.globalProperties.$myPlugin = myPlugin; }, }; ``` 4. 创建rollup配置文件 为了将您的插件打一个单独的JavaScript文件中,您需要创建一个名为"rollup.config.js"的文件。以下是一个示例配置文件: ```js import { terser } from 'rollup-plugin-terser'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; export default { input: 'index.js', output: { file: 'dist/myPlugin.js', format: 'umd', name: 'myPlugin', }, plugins: [ resolve(), commonjs(), terser(), ], }; ``` 这将创建一个名为"dist/myPlugin.js"的文件,其中含已打的插件代码。 5. 编译和发布插件 最后,您需要使用rollup命令来编译插件代码,并使用npm命令将插件发布npm仓库中: ``` npx rollup -c npm login npm publish ``` 现在,您的Vue3插件已经准备好使用了!在Vue应用程序中安装插件的方法如下: ```js import { createApp } from 'vue'; import myPlugin from 'my-plugin'; const app = createApp({}); app.use(myPlugin); app.mount('#app'); ``` 希望这个简单的示例可以帮助您开始编Vue3插件!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值