手把手教你使用vite打包自己的js代码包并推送到npm

本文介绍: 手把手教你使用 vite 打包编译代码库，并上传到npm，然后测试使用

准备

使用 vite 创建 项目

npm create vite viet-demo

框架选择Others
在这里插入图片描述
模板选择library

选择ts

这样项目就创建完了

这个项目默认有一个函数，用来记录按钮的点击次数并显示在按钮上

文件 说明

文件目录如下

viet-demo
    │  .gitignore
    │  index.d.ts
    │  index.html
    │  package.json
    │  tsconfig.json
    │  vite.config.ts
    │
    ├─lib
    │      main.ts
    │
    ├─public
    │      vite.svg
    │
    └─src
            main.ts
            style.css
            typescript.svg
            vite-env.d.ts

下面只对关键文件进行说明

index.d.ts t s 类型声明文件
index.html 测试用的前端页面
package.json 包配置文件
- "name": "viet-demo-test" 包的名字，要唯一，不能跟npm 现有的包名重复，而且不能太短
vite.config.ts vite 配置文件
- build: { lib: { entry: './lib/main.ts', name: 'Counter', fileName: 'counter' } }
  - entry为入口文件
  - name为打包后暴露的全局变量
lib 这个就是要上传到npm的编译前的代码目录，主要是在这个目录撸代码
src 为测试的代码目录

打包上传

改一下package.json 文件，默认是私有包，但是npm上传私有包需要收费，
所以本着开源精神（经费不足）我们就把package.json 里面的"private": true,删掉，这样大家都能使用我们上传的包了。

安装依赖包

npm install

打包

npm run build

上传（如果是第一次上传会提示输入用户名和密码）

npm publish

这样在后台就可以看到我看刚才上传那个包了
在这里插入图片描述

使用测试

在其他项目中使用
 安装包

npm install viet-demo-test

然后引用

import {setupCounter} from 'viet-demo-test'

setupCounter(document.getElementById('btnId'))

测试完成！

大家有任何问题都可以在评论区留言交流，相互学习！

原文地址:https://blog.csdn.net/BDa w n/article/de tail s/129203204

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_42964.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：su wngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

打包上传

使用测试

相关文章

发表回复 取消回复

发表回复取消回复