越努力,越幸运,做个ccode～

0%

vite构建库并发布

Posted on

添加入口文件 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 包

注意事项

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>