vue-cli3携手rollup、github-actions打造自动部署的vue组件模板(使用篇)

前言

旨在让开发者在开发时拥有

  • 享受组件开发
  • 一个长得还不错的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/chas...,就进入了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)

阅读 1.5k

推荐阅读