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

構建出了預發佈文件

• 壓縮的css
• es 模塊文件
• umd 通用模塊
• iife 自動執行的功能（壓縮js）

只需關注src文件內的組件開發，開發完成就能夠

npm publish

發佈組件了（有特殊需求配置的除外）

運行

npm run dev

監聽src文件變更，熱更新

demo運行

新開一個終端

npm run demo:dev

運行在8080端口，打開 http://localhost:8080

Home 頁面

上手 頁面

頁面基礎內容也是自動生成的，只須要對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，感動！

這裏咱們只介紹怎麼用她完成demo自動構建，想要更多瞭解的能夠看看阮一峯老師的這篇文章GitHub Actions 入門教程

添加密鑰並提交項目

• 進入Settings/Developer settings建立密鑰，勾上 admin:repo_hook，repo，workflow

• github新建一個倉庫，名叫 chaste-component

而後提交項目到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

github pages

設置source爲gh-pages分支

打開 https://blryli.github.io/chas...，就進入了demo頁面

以後chaste-component項目的每次提交都回自動更新demo，已配置的 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地址 vue-component-template （以爲有幫助，歡迎star）