如何将自己做的UI库以及文档上线并发布至npm?
让我们的官网部署到github或者码云上
发布到npm
- 首先打包生成dist目录(如果项目中有dist目录则删除后在打包)
yarn build
// 或者
npm run build
- 在.gitnore中加入/dist(忽略根目录下的dist)
- 在本地测试网站是否成功运行
// 安装http-server 开启本地服务器
npm install http-server -g
// 切换到我们的项目目录、开启本地服务
hs dist -c -1
- 在浏览器中进行访问(功能正常,没有问题)
- 然后打开github创建一个仓库
- 创建成功
- 把打包后的代码上传至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
- 上传成功后,打开seetings,找到Pages,选择main,点击Save保存
- github会为自己生成一个链接。点开后即可看到我们的网页
一键部署(省去更新代码后一遍一遍的提交)
- 在项目根目录下创建一个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 -
- 运行deploy.sh(mac自带bash终端、windows和linux需百度)
sh deploy.sh
- 成功后即可看到更新后的代码
发布至npm
- 配置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$/,
}),
],
};
- 终端在根目录输入
rollup -c
- 就会在/dist/lib生成lu.css和lu.js
- 修改package.json
// 在package.json中加入以下两行(如果已经有了files和main删掉)
"files": ["dist/lib/*"],
"main": "dist/lib/lu.js"
- 发布至npm
// 这里注意项目的名称不能和npm现有的包名重复
npm publish
- 发布成功后即可使用npm或者yarn安装我们的依赖