vue-cli3携手rollup、github-actions打
前言
旨在让开发者在开发时拥有
- 享受组件开发
- 一个长得还不错的demo
- rollup类库打包工具对代码的抚摸
- eslint代码风格检查、自动格式化带来的快感
- github-actions把demo自动部署到gh-pages身上
的一条龙服务。(接下来，我们携手...)
进入正题
假设项目经理提了个需求：要开发一个组件，名叫 chaste-component。
准备工作
- 克隆项目
git clone https://github.com/blryli/vue-component-template.git
cd vue-component-template
npm install
- 更改package.json
{
name: 'chaste-component'
}
准备工作完毕
组件运行及打包
打包
默认使用package.json的name打包
npm run build
image.png
构建出了预发布文件
- 压缩的css
- es 模块文件
- umd 通用模块
- iife 自动执行的功能（压缩js）
只需关注src文件内的组件开发，开发完成就可以
npm publish
发布组件了（有特殊需求配置的除外）
运行
npm run dev
监听src文件变动，热更新
demo运行
新开一个终端
npm run demo:dev
image.png
运行在8080端口，打开 http://localhost:8080
Home 页面
image.png
上手 页面
image.png
页面基础内容也是自动生成的，只需要对docs-src/views文件的组件示例做调整
eslint风格检查及自动格式化
支持eslint风格检查及自动格式化，在ctrl+s保存的时候自动格式化，没用过格式化的都说直接飞起来了
eslint风格检查
需要插件eslint、babel-eslint、eslint-plugin-vue及配置文件.eslintrc.js的支持，这些都已经做好了
- 如果不符自己的编码风格，请自行调整
- 有自己常用配置的话就更简单了，直接替换.eslintrc.js文件内容
自动格式化
需要编辑器设置的支持，这里在.vscode/settings.json文件配置好了
- 如果有自己的用户设置直接把这个文件删除就可以了
- 如果要广泛使用这些设置，就把设置放到用户设置里面
github-actions自动构建demo
2019年11月github正式开放了github-actions，感动！
image.png
这里我们只介绍怎么用她完成demo自动构建，想要更多了解的可以看看阮一峰老师的这篇文章GitHub Actions 入门教程
添加密钥并提交项目
- 进入
Settings/Developer settings创建密钥，勾上 admin:repo_hook，repo，workflow
image.png
- github新建一个仓库，名叫 chaste-component
image.png
然后提交项目到chaste-component仓库
git add .
git commit -m "first commit"
git remote add origin git@github.com:blryli/chaste-component.git
git push -u origin master
- 将密钥储存到当前仓库的
Settings/Secrets里面，命名 ACCESS_TOKEN
image.png
github pages
设置source为gh-pages分支
image.png
打开 https://blryli.github.io/chaste-component/，就进入了demo页面
image.png
之后chaste-component项目的每次提交都回自动更新demo
image.png
已配置的 workflows/ci.yml 如下
name: GitHub Actions Build and Deploy Demo
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@releases/v2
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: docs
BUILD_SCRIPT: npm install && npm run build:es && npm run demo:build
- 把打包和构建交给github actions，丢掉频繁的打包操作
- 专注享受组件开发
不想用github actions或想麻烦点的话也可以手动提交代码(哭脸)
npm run build:es
npm run demo:build
git add .
git commit -m "update demo"
git push
下一篇博客将分享 vue-cli3携手rollup、github-actions打造自动部署的vue组件模板（搭建篇）
github地址 （觉得有帮助，欢迎star）
