欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

发布一个npm包

发布时间:2024/7/5 编程问答 2 豆豆
如意编程网 收集整理的这篇文章主要介绍了 发布一个npm包 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

前言

我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架。

本例中我会使用vue脚手架创建一个项目,并发布到npm上面去。

通过脚手架创建项目

全局安装

首先,要创建项目,封装vue的插件用webpack-simple很合适,因此你需要全局安装@vue/cli-init插件:

yarn global add @vue/cli-init //或者 npm install @vue/cli-init -g

使用vue init webpack-simple vue-test-plugin 初始化目录; vue-test-plugin是项目名称,也是新建项目的目录。
然后我使用全局安装失败了,那么我就使用局部安装把。

局部安装

新建D:/test test文件夹,局部安装@vue/cli-init插件:

yarn add @vue/cli-init //或者 npm install @vue/cli-init

安装成功之后,使用命令初始化vue-test-plugin项目:

./node_modules/.bin/vue init webpack-simple vue-test-plugin

然后就一路enter直到项目创建完成。创建完成后的目录如下:

插件开发

在./src/目录下实现你自己的功能,我的功能实现完了之后如下:

./src/lib/banner.vue:是主功能文件

./src/lib/index.js:

import VueBanner from './banner.vue' const plugin = {install: function(Vue) {Vue.component(VueBanner.name, VueBanner)} } // 这里的判断很重要 if (typeof window !== 'undefined' && window.Vue) {window.Vue.use(plugin) } export default plugin

我们在webpack配置的入口文件就是index.js,install是挂载组件的方法,有了它我们就可以在外部use一个插件了。

如果外部使用<script>引入的话window存在,window.Vue.use(plugin)就直接将插件挂在在全局了。

修改文件配置

package.json 文件

{"name": "vue-test-plugin","description": "vue的插件测试","version": "1.0.1","author": "姓名 <xxx@xxx.com>",// 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径"main":"dist/vue-test-plugin.js",//开源协议"license": "MIT",// 因为组件包是公用的,所以private为false"private": false,"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},// 指定代码所在的仓库地址"repository": {"type": "git","url": "git+xxxxx" //这里写github的git地址,格式为:'git+' + gitHubURL},"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"], // 指定关键字"keywords": ["vue","test-plugin"],// 项目官网的url"homepage": "github地址下的readme.md文件地址","devDependencies": {...} }

webpack.config.js 文件

// entry: './src/main.js',entry: './src/lib/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',// filename: 'build.js'filename: '/vue-test-plugin.js',library: 'VueTestPlugin',libraryTarget: 'umd',umdNamedDefine: true},

由于不是所有使用组件的人都是通过 npm 安装使用 import 引入组件的,还有很多人是通过 <script>标签的方式直接引入的,所以我们要将 libraryTarget 改为 umd 格式,同时我们要配置文件入口和出。

.gitignore 文件

dist/ //删除此行

因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。

index.html 文件

<!-- <script src="/dist/build.js"></script> --><script src="/dist/vue-test-plugin.js"></script>

打包

yarn build //或者 npm run build

因为在import的时候,自动会加载packge.json文件中的main中的路径,我这里是:dist/vue-test-plugin.js,因此会去读取这个文件,所以需要打包。

发布npm

  • 1.注册npm官网账号
  • 2.切换到vue-test-plugin根目录下,添加npm账号:npm adduser
  • 3.输入自己的npm用户名、密码、邮箱。
  • 4.上传代码:npm publish

发布出现问题:npm ERR! publish Failed PUT 403

如果发布过程中出现此问题是因为使用了淘宝镜像,需要切换成原来的镜像,发布成功后,再切回来。

检查是否使用了淘宝镜像

npm config get registry

出现如下结果:

https://registry.npm.taobao.org/

如果出现如上结果,继续下一步

切换成原来的npm源

npm config set registry=http://registry.npmjs.org

继续npm publish发布npm包。

切回淘宝镜像

npm config set registry=https://registry.npm.taobao.org/

转载于:https://www.cnblogs.com/wenwenwei/p/10956523.html

创作挑战赛新人创作奖励来咯,坚持创作打卡瓜分现金大奖

总结

以上是如意编程网为你收集整理的发布一个npm包的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。