前端里的持续集成

最新推荐文章于 2024-08-17 19:48:22 发布

卡尔KAEL

最新推荐文章于 2024-08-17 19:48:22 发布

阅读量2.7k

点赞数

分类专栏：前端部署 / 持续部署

本文链接：https://blog.csdn.net/weixin_37625953/article/details/80167796

版权

前端部署 / 持续部署专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文探讨了前端开发中持续集成的需求与解决方案，包括统一代码仓库管理、自动化编译、前端模块化、静态资源处理、自动化部署测试以及性能优化。通过持续集成平台如Jenkins和Travis CI，结合部署工具，实现开发流程自动化，提高团队协作效率和产品质量。

摘要由CSDN通过智能技术生成

什么是持续集成,什么是统一代码仓库,前端工程化,自动化构建

持续集成

持续集成需求

持续集成式通过平台串联各个开发环节,实现和沉淀工作自动化的方法;
线上代码和代码仓库不同步,影响迭代和团队协作;
静态资源发布依赖人工,浪费开发人力;
缺少自动化测试, 产品质量得不到保障;
文件简单修改上线,需要技术介入

持续集成解决

统一代码厂库通过分支管理合并主干svn / git;
自动化构建工具,编译,部署,测试,监控,本机开发上线环境;(可以移步我的QA工程师篇博客)
持续集成平台. :jenKins, Trevis CI
部署工具:rsync , shelljs 可以帮助自己写shell, yargs 可以拿到 - 命令行后面的参数 -v
运营同学有权限操作运营页面保存即可上线;

统一代码仓库多开分支

svn 开发阶段图示;
这里写图片描述

同事z: 从主干A上面拿取分支 A-01;
同事x: 从主干A上面拿取分支 A-02;
同事z: A-01干好活了, 把代码上传到Trunk上此时A更新成了B;
同事x: 此时A-02也干好活了,把更新的B默认拉去过来,合并代码, 然后把代码送到新的主干上去; B更新成了C;
C-back 留下tags 方便回滚

前端工程化

1.自动化编译

这里写图片描述

2.前端模块化

```
// CMD 同步
/**
 * require, 去加载别的模块
 * exports, 导出模块
 * module , 就是把很多东西一起导出
 */
define(function (require, exports, module) {
    var a = require('./a')
    a.doSomething()
// 此处略去 100 行
    var b = require('./b')
// 依赖可以就近书写
    b.doSomething()
})
```


```
// AMD 默认推荐的是 异步
define(['./a', './b'], function (a, b) {
    // 依赖必须一开始就写好
    a.doSomething()
// 此处略去 100 行
    b.doSomething()
})

```


```
//RequireJS.js
require(['math'],function (math) {
    math.add(2,3)
})
```

3.定位静态资源;

 1. 有时候浏览器缓存,需要我本地自动清楚缓存;
```
//以前,我们是这样做的.我们的逻辑js文件 每次都不一样;
<script src="7.js" v="1.0.0"></script>
``` 
 2. 现在呢.加了MD5版本戳,代替了
 3. 这里延伸一个问题?有些公司发布一定要是半夜才能发布.那么可不可做到随时发布呢? 
 4. 配置超长时间的本地缓存---节省带宽,提高性能
 5. 采用内容摘要作为缓存更新依据 ---精准的缓存控制
 6. 静态资源cdn部署----优化网络请求
 7. 更新资源发布路径实现非覆盖发布---平滑升级

4.前端开发组建化;

 `Web Components `
 1. Custom Elements
    ```
    class ButtonHelloElement extends HTMLButtonElement{
        constructor(){
            super()
            this.addEventListener('click',()=>{
                alert("hello world")
            })
        }
    }
    customElements.define("button-hello",ButtonHelloElement,{extends:"button"})
    //<button-hello> chenjing </button-hello>
    ```


 2. HTML Imports
    是在一种HTMLs中引用以及复用其他HTML文档的方式, 可以理解为 我们常见的模板中的 include之类的作用
    ```
    //header.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="logo">
    我是header页面
</div>
</body>
</html>
    ```
    ```
    <meta charset="UTF-8">
    <link rel="import" href="./header.html">
    <script>
        const link = document.querySelector('link[rel=import]');
        const header = link.import;
        const pulse = header.querySelector('div.logo')
        const d = document.currentScript.ownerDocument;
        console.log(link)
        console.log(header)
        console.log(pulse)
        console.log(d)
    </script>

    ```
 3. HTML Templates
 4. Shadow DOM 沙箱环境
      用来隔离组建代码的作用域, 列如我组建的css 不影响其他组建之类的,  而iframe 又太重会出现很多奇怪的问题, 旨在提供一种更好的组织页面的方式,避免代码互相影响;沙箱里面的css 写法也不太一样;

    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Shadow DOM</title>
    </head>
    <body>
    <div class="host">Hello World!</div>
    <script>
        var host = document.querySelector('.host');
        var root = host.createShadowRoot();

        var node = document.createElement('h1');
        node.textContent = 'Shadow DOM 介绍';

        var para = document.createElement('p');
        para.textContent = 'Shadow DOM 详细信息';

        root.appendChild(node);
        root.appendChild(para);
    </script>
    </body>
    </html>
    ```