前端里的持续集成

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

---

持续集成

持续集成需求

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

持续集成解决

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

---

统一代码仓库多开分支

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文件 每次都不一样;

``` 
 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"})
    // chenjing 
    ```


 2. HTML Imports
    是在一种HTMLs中引用以及复用其他HTML文档的方式, 可以理解为 我们常见的模板中的 include之类的作用
    ```
    //header.html



    
    



    我是header页面



    ```
    ```
    
    
    

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

    ```
    
    
    
        
        
    
    
    
Hello World!
    
    
    
    ```

5.自动化部署测试配合版本库;

 Jenkins  Travis CI

6.自动化 性能优化