12. 发布源代码至npm

发布至GitHub

在github上新建一个仓库

rm -rf dist
yarn build
cd dist
git init
git add .
git commit -m "init"
git remote add origin git@github.com:xxx.git
git push -u origin master

在github上开启github pages
如果预览发现404,应修改vite配置文件vite.config.ts, 添加下列两行

export default {
  base: './',
  assetsDir: 'assets',
}

使用bash脚本一键发布
在项目根目录新建deploy.sh文件

rm -rf dist &&
yarn build &&
cd dist &&
git init &&
git add . &&
git commit -m "update" &&
git remote add origin git@github.com:xxx.git &&
git push -f -u origin master &&
cd -
echo https://xxx/index.html

运行下列命令一键发布

sh deploy.sh

使用rollup打包

在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 { openDialog as openDialog} from './openDialog'

vite需要自行配置rollup,
先安装rollup

npm i -g rollup

在项目根目录新建rollup.config.js

import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
const scss = require('rollup-plugin-scss');
const dartSass = require('sass');
import { terser } from "rollup-plugin-terser"
export default {
    input: 'src/lib/index.ts',
    output: [{
        globals: {
            vue: 'Vue'
        },
        name: 'Pika',
        file: 'dist/lib/pika.js',
        format: 'umd',
        plugins: [terser()]
    }],
    plugins: [
        scss({ include: /\.scss$/, sass: dartSass }),
        esbuild({
            include: /\.[jt]s$/,
            minify: process.env.NODE_ENV === 'production',
            target: 'es2015'
        }),
        vue({
            include: /\.vue$/,
        })
    ],
}

安装必要的依赖，package.json文件内容修改如下，重新安装依赖

{
  "name": "pika-ui-vue",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "resolutions": {
    "node-sass": "npm:sass@^1.26.11"
  },
  "dependencies": {
    "github-markdown-css": "^4.0.0",
    "marked": "^1.1.1",
    "prismjs": "^1.21.0",
    "vue": "^3.0.0-rc.1",
    "vue-router": "4.0.0-beta.3"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "3.0.0",
    "rollup-plugin-esbuild": "2.5.0",
    "rollup-plugin-scss": "2.6.0",
    "rollup-plugin-terser": "7.0.2",
    "rollup-plugin-vue": "6.0.0-beta.10",
    "sass": "1.32.11",
    "vite": "1.0.0-rc.1"
  }
}

注意devDependencies中的版本号前都去掉了升级符号(^), 否则打包会各种报错
参考文章一
参考文章二
运行命令 **rollup -c** 完成打包，在dist/lib目录生成2个文件pika.js和pika.css

发布到npm

在package.json中添加 files 和 main 两项

{
  "name": "pika-ui",
  "version": "0.0.1",
  "files": ["dist/lib/*"],
  "main": "dist/lib/pika.js"
  "script":{
    ...
  }
}

注意：name必须是小写，可用 - 或 _ 连接，不能和npm已有库重名，每次发布 version 都应该更新

在npm官网注册账号 并记住用户名、邮箱、密码
注册好后记得去验证邮箱，否则发布组件库时可能会403报错

将npm的源改为官方源，发布时不能使用淘宝源

# 检查源
npm config get registry
# 设置官方源
npm config set registry https://registry.npmjs.org/

在终端上登录npm(会要求输入用户名、密码、邮箱)

# 登录
npm login
# 注销
npm logout

发布组件库到npm

npm publish

发布成功会就能在npm官网中登录账号查看你的package

模拟用户使用我的组件库

<template>
  <Button>Hello</Button>
  <hr>
  <Switch v-model:value="bool"/>
  <hr>
  <Tabs v-model:selected="selected">
    <Tab title="标题1">内容1</Tab>
    <Tab title="标题2">内容2</Tab>
  </Tabs>
  <hr>
  <Button @click="showDialog">打开对话框</Button>
</template>
<script>
import {Button,Switch,Tabs, Tab, openDialog, Dialog} from 'pika-ui-vue'
import 'pika-ui-vue/dist/lib/pika.css'
import {h} from 'vue'
export default {
  name: 'App',
  components: {
    Button,
    Switch,
    Tabs,
    Tab,
    Dialog
  },
  data(){
    return {
      selected: '标题1',
      bool: true
    }
  },
  setup() {
    const showDialog = () => {
      openDialog({
        title: h('strong', {}, '标题'),
        content: '你好',
        ok() {
          console.log('ok')
        },
        cancel() {
          console.log('cancel')
        }
      })
    }
    return {
      showDialog
    }
  }
}
</script>