如何将自己的插件发布到npm上 / 发布到公司npm源上

一、项目初始化

新建一个空文件夹,存放你的插件源代码。

然后执行npm init,初始化项目的一些基本信息。
在这里插入图片描述
然后你会发现项目中多了一个package.json的文件。

二、编写插件内容

我们先写一个简单的测试例子。

在根目录新建一个index.js文件,简单地写一个测试函数,模拟插件内容。
在这里插入图片描述

三、发布插件包

首先,确保你本地的npm源使用的是npm的源,而不是淘宝镜像、公司镜像等等源。

推荐使用nrm管理本地npm源。

全局安装nrm: npm install -g nrm

查看npm源:nrm ls
会把所有的源都列出来,其中带*的是当前使用的源

添加npm源:nrm add xxx http://xxxnpm.cn/
xxx 是你给这个源起的名字,后面跟上源的URL

切换npm源:

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 Vue2 项目打包成库并发布npm 上,可以按照以下步骤进行操作: 1. 在项目根目录下创建一个名为 `package.json` 的文件,用于描述你的库信息和依赖项。可以使用 `npm init` 命令自动生成模板。 2. 安装必要的依赖项,例如 `vue`、`rollup`、`rollup-plugin-babel` 等。其中 `rollup` 是一个 JavaScript 模块打包器,用于将 Vue2 项目打包成一个库;`rollup-plugin-babel` 则是用来将 ES6+ 语法转换成 ES5 语法。 ```bash npm install vue rollup rollup-plugin-babel --save-dev ``` 3. 在项目根目录下创建一个名为 `src` 的文件夹,用于存放你的源代码。可以在该目录下创建一个 `index.js` 文件,用于导出你的 Vue2 组件插件。 4. 在项目根目录下创建一个名为 `rollup.config.js` 的文件,用于配置打包参数。具体配置可以参考下面的示例: ```javascript import babel from 'rollup-plugin-babel'; import commonjs from 'rollup-plugin-commonjs'; import resolve from 'rollup-plugin-node-resolve'; import vue from 'rollup-plugin-vue'; export default { input: 'src/index.js', output: { name: 'MyLibrary', file: 'dist/my-library.js', format: 'umd', globals: { vue: 'Vue' } }, plugins: [ vue(), resolve(), commonjs(), babel({ exclude: 'node_modules/**' }) ], external: ['vue'] }; ``` 5. 在 `package.json` 文件中添加 `scripts` 字段,用于定义打包命令和发布命令。例如: ```json "scripts": { "build": "rollup -c", "prepublishOnly": "npm run build" } ``` 上面的配置表示,运行 `npm run build` 命令会执行 `rollup -c` 命令进行打包;运行 `npm publish` 命令时会先执行 `npm run build` 命令,然后再执行发布操作。 6. 执行 `npm login` 命令登录 npm 账号,如果没有账号可以先注册一个。 7. 执行 `npm publish` 命令将库发布npm 上。如果发布成功,其他人就可以通过 `npm install` 命令安装你的库并使用了。 以上就是将 Vue2 项目打包成库并发布npm 上的基本步骤,具体细节可以根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值