项目构建、部署、发布

gulu-ui发布到npm上，供用户下载直接用，简洁代码

项目构建

忽略dist

如果有dist文件夹，直接删除，再打开.gitignore文件，添加/dist和dist，把根目录下的dist忽略和把所有dist都忽略。

// .gitignore
node_modules
.DS_Store
dist
/dist
*.local
/.history

本地预览并检查dist是否正确打包

$ npm install -g serve
$ yarn global add serve  // 安装用于监听 dist，或者安装 http-server
$ serve -s dist // 检查 dist 是否正确打包

Webpack或者Vite 配置

独立于后端部署前端应用——后端暴露一个前端可访问的 API，前端是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的 publicPath

• vue2 + Webpack

//  vue.config.js 

module.exports = {
// 生产环境使用'/远程仓库名/'，开发环境使用'/'
    publicPath: process.env.NODE_ENV === 'production'
                ? '/远程仓库名/' : '/',
}

• vue3 + Vite

// vite.config.ts 
export default {
    base: "./",
    assetsDir: "assets",   // 注意assetsDir不要拼错

打包脚本（也可手动部署）

// deploy.sh
set -e       // 当发生错误时中止脚本
yarn build   // 构建，确保在项目根目录下运行 
cd dist      // 进入打包后dist目录

git init
git add .
git commit -m ’deploy‘
git remote add origin 以git@开头的仓库地址
git push -f -u origin main
cd -         // 回到之前的目录

$ sh deploy.sh  // 用脚本部署到远程仓库

手动部署

• 新建项目

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin 以git@开头的仓库地址
// 或者需要改仓库的下面一行命令
git remote set-url origin 以git@开头的仓库地址 // 修改远程仓库url
git push -u origin main

• 既有仓库

git remote add origin 以git@开头的仓库地址
git branch -M main
git push -f -u origin main

发布项目供全球开发者使用

打包库文件

vite不支持此功能，需要自行配置rollup

1. 在lib文件夹下创建index.ts，将所有需要导出的东西导出

import Switch from "./Switch.vue";
export {Switch}
// 可缩写为下面的形式

// 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";

2. 根目录下创建rollup.config.js，告诉rollup怎么打包

3. 全局安装rollup

yarn global add rollup 
yarn add --dev rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser

4. 运行rollup -c，会把src/lib/index.ts编译成dist/lib/gulu.js

发布dist/lib/目录，上传到npm的服务器

1. 添加files和main

// package.json
{
    "name":"gulu-ui-1",  //小写字母，避免与已有重名
    "version":"0.0.1",   //每次改的版本需要与上次不同
    "files":["dist/lib/*"],
    "main":"dist/lib/gulu.js"
}

2. 上传

npm config get registry  
npm config set registry https://registry.npmjs.org/
npm publish

3. 遇到需要作者发布，去npm官网注册用户名、密码、邮箱

$ npm login
Username:
Password:
Email:

npm publish

开发者使用

yarn add gulu-ui-1@0.0.1

// App.vue
<template>
<Button @click="open">Hi</Button>
<hr />
<Switch v-model:value="switchValue"/>
<hr />
<Tabs v-model:selected="tabSelected">
<Tab title="tab1">内容1</Tab>
<Tab title="tab2">内容2</Tab>
</Tabs>
</template>

<script>
import{ Button, Switch, Dialog, Tabs, Tab} from 'gulu-ui-1';
export default{
    name:'App',
    components:{
    Button, Switch, Dialog, Tabs, Tab
    },
    data(){
      return{
        switchValue:false,
        tabSelected:'tab1'
      }
    },
    methods:{
      open(){
        openDialog({title:'标题', content:'内容'})
      }
    }
}