手把手教你使用vite打包自己的js代码包并推送到npm |
您所在的位置：网站首页 › vite打包vue项目 › 手把手教你使用vite打包自己的js代码包并推送到npm |
手把手教你使用vite打包自己的js代码包并推送到npm
|
目录
准备使用vite创建项目文件说明打包上传使用测试
这篇文章给大家介绍一些如何使用vite打包编译代码库，并上传到npm，然后测试使用
准备
要有npm账号，没有的铁子去npm官网注册一个，又不要钱。 使用vite创建项目一行代码搞定 npm create vite viet-demo框架选择Others 这个项目默认有一个函数，用来记录按钮的点击次数并显示在按钮上 文件说明文件目录如下 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 ts类型声明文件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'))测试完成！ 大家有任何问题都可以在评论区留言交流，相互学习！ |
模板选择library 
选择ts 
这样项目就创建完了
【本文地址】
今日新闻 |
推荐新闻 |