将我们的UI库发布到npm

我们要将我们的库发布到npm首先需要对我们的库文件进行打包，因为vite不支持对库文件进行打包，所以需要我们自行配置rollup

1.打包库文件

1.1 创建lib/index.ts

将所有需要导出的文件放到这个文件下导出

lib/index.ts

export { default as Switch } from './Switch.vue'
export { default as Button } from './Button.vue'
export { default as Tabs } from './Tabs.vue'
export { default as Tab } from './Tab.vue'
export { default as Dialog } from './Dialog.vue'
export { default as Steps } from './Steps.vue'
export { default as Step } from './Step.vue'
export { openDialog as openDialog } from './openDialog'

1.2. 创建rollup.config.js

用来告诉rollup怎么打包

/rollup.config.js

import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"

export default {
// 作为导出文件的入口文件
  input: 'src/lib/index.ts',
  // 导出后的文件
  output: {
    // globals里的是我们用到的外部依赖或者插件，这里面的资源不会进行打包
    globals: {
      vue: 'Vue'
    },
    // 仓库名
    name: 'Ivue',
    // 要生成的文件
    file: 'dist/lib/ivue.js',
    // 文件输出格式
    format: 'umd',
    // 对js进行丑化的插件（让js变成无格式的一行的代码）
    plugins: [terser()]
  },
  plugins: [
    scss({ include: /\.scss$/, sass: dartSass }),
    esbuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015'
    }),
    vue({
      include: /\.vue$/,
    })
  ],
}

1.3. 运行 rollup -c

需要我们先安装 rollup

yarn global add rollup
npm i -g rollup

运行命令它会将我们的src/lib/index.ts 编译成dist/lib/ivue.js.

2.将代码发布到npm上

2.1. 在我们的package.json里添加files 和 main

files：我们要上传的打包库后生成的文件
main：我们库的主文件

2.2. 运行npm publish

如果我们在使用淘宝源，我们需要改为npm源
查看自己使用的源

npm config get registry

使用nrm修改我们的源

yarn add nrm
nrm use npm

修改一下我们的版本号

运行

npm publish

这个命令会把我们files里对应的所有文件上传到npm

这里如果我们没有登录npm直接运行npm publish的话会报错，所以需要我们注册一下npm，然后运行

npm login

最后编辑于：2020.11.04 17:22:06