vite构建库并发布 - 小宇的博客

添加入口文件 src/lib/index.ts#

1
export { default as Button } from './Button.vue'
2
export { default as Switch } from './Switch.vue'
3
// 相当于
4
// import Switch from './Switch.vue'
5
// export { Switch }

修改vite.config.js#

参考链接: vite构建库构件库配置项

1
build: {
2
  lib: {
3
    entry: path.resolve(__dirname, 'src/lib/index.ts'),
4
    name: 'xinyi-ui',
5
    fileName: (format) => `xinyi-ui.${format}.js`
6
  },
7
  rollupOptions: {
8
    // 确保外部化处理那些你不想打包进库的依赖
9
    external: ['vue'],
10
    output: {
11
      // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
12
      globals: {
13
        vue: 'Vue'
14
      }
15
    }
16
  }
17
}

format 默认是['es','umd'] 所以会生成 xinyi-ui.es.js 和 xinyi-ui.umd.js 两个文件

修改package.json#

1
"files": ["dist"],
2
"main": "./dist/xinyi-ui.umd.js",
3
"module": "./dist/xinyi-ui.es.js",
4
"exports": {
5
  ".": {
6
    "import": "./dist/my-lib.es.js",
7
    "require": "./dist/my-lib.umd.js"
8
  }
9
},

各字段意义

files 字段是要包含在项目中(npm publish 打包的tarball)的文件数组。
main CommonJS 规范的包入口文件
module ES Module 的包入口文件 package.json module
exports Node.js 12+ 支持作为"main" 的替代方案，它可以支持定义子路径导出和条件导出，同时封装内部未导出的模块。 package.json exports

发布npm 包#

npm login 登录在https://www.npmjs.com/ 注册的账号
npm whomi 确认登录
npm publish

注意事项#

name:

必须是小写字母可用 - 或 _ 连接
不能跟npm上现有的name 重名

version

每次publish 的版本不能与之前每一次的相同
所以从第二次开始先改version 再publish

测试是否发布成功#

vue create test-xinyi-ui 新建一个项目目录
在 App.vue 中引入相关组件和 css

1
import { Button } from 'xinyi-ui'
2
import 'xinyi-ui/dist/style.css'
3
export default {
4
  components: { Button }
5
}

在模板中使用组件

1
<Button>按钮</Button>