美文网首页vue
vue-cli3携手rollup、github-actions打

vue-cli3携手rollup、github-actions打

作者: blryli | 来源:发表于2020-01-08 10:28 被阅读0次

    前言

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

    • 享受组件开发
    • 一个长得还不错的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)

    相关文章

      网友评论

        本文标题:vue-cli3携手rollup、github-actions打

        本文链接:https://www.haomeiwen.com/subject/ldijactx.html