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

这篇文章给大家介绍一些如何使用vite打包编译代码库，并上传到npm，然后测试使用

准备

要有npm账号，没有的铁子去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 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'))

测试完成！

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