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 [email protected]: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）