npm包从创建到发布及下载使用

1、npm项目初始化

1.1 在本地磁盘上创建一个空项目,取文件夹名为myNpm。注意请先去npm网官去确定一下,这个项目名是否已经被占用了。(如果这个 名字已经被占用了,则无法向npm上上传的)

npm view 包名
# 这个命令用来查看 某个包的信息
# 包名不能与现有包重名,只能是小写字母+数字+中划线
# 如果返回404,说明这个项目名在npm官网上找不到,此时你就可以使用。
# 否则,说明不可用。

1.2 创建一个package.json文件,对你项目myNpm信息进行设置。

npm init --yes

2、完成功能开发

2.1 正常开发,完成你的代码。
2.2 在默认情况下,index.js是这个项目的入口文件
在这里插入图片描述

3、切换当前npm镜像源到官网

3.1 查看当前的npm的registry配置.

npm config get registry 
# 查看当前的npm的registry配置,确保是https://registry.npmjs.org

# 如果不是,可以通过如下命令来设置
npm config set registry https://registry.npmjs.org 
# 手动设置registry

3.2 或者使用nrm工具来设置

nrm ls

4、连接npm

npm adduser 

4.1 这个命令需要输入三个信息以供连接上npmjs:(如果你已经不是第一次连接了,这一步是可以省略的。)
- 用户名
- 密码
- 邮箱(是你在npmjs官网上注册时使用的信息)
4.2 可以通过如下命令检查自己是否连接成功

npm who am i

4.3 退出账户命令

npm logout

5、把包上传到npm

5.1 上传命令

 npm publish 

5.2上传成功后显示

-----------------------------------
npm notice
npm notice package: tool61@1.0.0npm notice === Tarball Contents ===
npm notice 1.3kB index.jsnpm notice 220B  package.json
npm notice === Tarball Details ===
npm notice name:          tool61npm notice version:       1.0.0
npm notice package size:  855 B
npm notice unpacked size: 1.5 kB
npm notice shasum:        3bfba7bc92e242810a850ac39ded7ebe992a6d9c
npm notice integrity:     sha512-VoRuxxbcGzXen[...]v3tKWYUT1B1AQ==
npm notice total files:   2
npm notice
+ tool61@1.0.0

6、上传过程可能出现的错误

6.1 这个包名被别人先用了,需要更改package.json文件中"name"的值,重新命名包
6.2 包的版本号不对:每次publish时,包的版本号都应该要大于之前的版本号
6.3 文件过大。你可能需要创建.npmignore文件来设置在打包时要忽略哪些文件。如下是一个demo.

 # .npmignore/node_modulesnpm-debug.log/src/examples/build

6.4 如果没有报错,则表示一切ok,你可以用你的帐号密码登陆npm,去查看你名下的package是否有了myNpm

7、下载使用

npm install 包名

7.1 在另一个项目中去下载包
7.2 为了提升下载速度,我们会切换镜像到taobao。

8、删除包操作

npm unpublish --force //强制删除

9、更新包

9.1 修改代码,保存。
9.2 更新版本号。可直接在package.json中修改:只能改大,不能改小。
9.3 重新publish

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种用于构建用户界面的渐进式JavaScript框架,它可以通过封装组件来实现可复用、模块化以及易于维护的代码。下面我将介绍如何对Vue组件进行封装,并将其打包发布npm上供他人使用。 首先,我们需要创建一个Vue项目,并在项目中使用Vue CLI来进行组件的开发和构建。可以通过以下命令创建一个新的Vue项目: ``` vue create my-component ``` 接下来,您可以通过Vue CLI支持的任何方式(如单文件组件、JavaScript脚本等)创建自定义组件。在组件的开发过程中,可以利用Vue提供的各种功能和特性,比如计算属性、生命周期钩子函数、模板语法等。确保你的组件功能完备、可复用且易于理解。 完成组件的开发后,我们需要将其打包成可用的npm包。Vue CLI可以帮助我们自动进行打包,只需执行以下命令: ``` npm run build ``` 该命令将生成一个dist文件夹,其中包含了打包后的组件代码。 接下来,我们需要在项目的根目录中创建一个package.json文件,用于描述我们的npm包,并设置一些配置信息。其中,name字段用于定义npm包的名称,version字段用于定义npm包的版本号。其他字段根据您的需要进行设置。然后,执行以下命令将package.json文件拷贝到dist文件夹中: ``` cp package.json dist/ ``` 然后,我们需要登录到npm官方网站,并创建一个账户。接着,使用以下命令进行登录: ``` npm login ``` 在登录成功后,使用以下命令发布npm包: ``` npm publish dist/ ``` 完成上述步骤后,您的自定义Vue组件就已经发布到了npm上。其他开发者可以通过以下命令安装并使用您的组件: ``` npm install your-component ``` 然后,在他们的Vue项目中,可以通过import语句引入您的组件,并在模板中使用它。 至此,我们已经学习了如何封装自定义Vue组件,并通过npm发布,供他人使用。希望这能帮助到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值