一键部署自己的网站以及上传至npm

如何将自己做的UI库以及文档上线并发布至npm？

1. 让我们的官网部署到github或者码云上

2. 发布到npm

1. 首先打包生成dist目录（如果项目中有dist目录则删除后在打包）

yarn build
// 或者
npm run build

2. 在.gitnore中加入/dist（忽略根目录下的dist）

3. 在本地测试网站是否成功运行

// 安装http-server 开启本地服务器
npm install http-server -g
// 切换到我们的项目目录、开启本地服务
hs dist -c -1

4. 在浏览器中进行访问（功能正常，没有问题）

5. 然后打开github创建一个仓库

6. 创建成功

7. 把打包后的代码上传至github仓库（记得以SSH的形式上传），在终端中输入

cd dist
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:yinlulululu/lu-ui.git
git push -u origin main

8. 上传成功后，打开seetings，找到Pages，选择main，点击Save保存

9. github会为自己生成一个链接。点开后即可看到我们的网页

一键部署（省去更新代码后一遍一遍的提交）

1. 在项目根目录下创建一个deploy.sh并写入

rm -rf dist
yarn build
cd dist
git init
git add .
git commit -m 'update'
git branch -M main
git remote add origin git@github.com:yinlulululu/lu-ui.git 
git push -u -f origin main
cd -

2. 运行deploy.sh（mac自带bash终端、windows和linux需百度）

sh deploy.sh

3. 成功后即可看到更新后的代码

发布至npm

1. 配置rollup.config.js

// 请先安装 rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser
import build 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: {
        vue: 'Vue',
      },
      name: 'lu',
      // 要打包到的目录
      file: 'dist/lib/lu.js',
      format: 'umd',
      plugins: [terser()],
    },

  plugins: [
    scss({include: /\.scss$/, less: dartSass}),
    build({
      include: /\.ts$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015',
    }),
    vue({
      include: /\.vue$/,
    }),
  ],
};

2. 终端在根目录输入

rollup -c

3. 就会在/dist/lib生成lu.css和lu.js

4. 修改package.json

// 在package.json中加入以下两行(如果已经有了files和main删掉)
"files": ["dist/lib/*"],
"main": "dist/lib/lu.js"

5. 发布至npm

// 这里注意项目的名称不能和npm现有的包名重复
npm publish

6. 发布成功后即可使用npm或者yarn安装我们的依赖