【前端架构】构建流设计

        构建系统是一个Web应用不可缺少的部分,其核心用途是,帮助开发者从源代码开发开始,构建出最后可用的目标软件。开发人员还能通过构建系统中的构建工具添加更多实用的功能,如修改监测代码触发代码编译后自动地刷新浏览器,在构建系统时配置不同的环境参数,在本地运行的时候做反向代理,等等。

        下面我们将介绍设计构建流的一些方法。

  1. 依赖管理工具
    • AMD方式:通过Bower进行管理
    • CommonJS方式:通过NPM/Yarn管理
    • UMD(Universal Module Definition,通用定义模块):将AMD和CommonJS融合
  2. 软件包源管理
    • 基于源码版本管理服务器
      "dependencies": {
        "demo": "git+http://github.com/username/demo/#v1.0.0"
      }复制代码

       

    • 本地的软件依赖包
      // 在package.json中通过"aofe": "file:aofe"的形式来引入依赖复制代码

       

    • 前端应用的编译:将应用编译成JavaScript、CSS及对应的HTML DOM
      npm run build复制代码

       

    • JavaScript的编译:Babel,TypeScript编译器
    • CSS的编译:Sass、LESS、Stylus
    • CSS In JavaScript
    • 模板编译
  3. 前端代码打包
  4. 设计构建流
    • 构建流分析:(1)我们需要做的任务有哪些?(2)每个任务具体的步骤拆解有哪些?(3)部署时,其对应的形式是怎么样的?(4)有没有现成的插件可使用?
    • 构建工具——自动化任务
    • 使用包管理工具构建——NPM
    • 使用构建工具构建——Grunt/Gulp
    • 使用打包工具构建——webpack
    • 实现构建流
    • 插件定义构建流
    • 框架定义构建流
  5. 持续交付问题
    • 部署方式:(1)持续部署;(2)自动化部署;(3)手动部署
    • 设计持续集成:(1)Bamboo;(2)Jenkins;(3)GoCD;(4)Travis CI
    • 自动化部署
    • 环境配置:(1)本地环境;(2)开发环境;(3)测试环境;(4)生产环境
    • 开发环境配置:(1)构建配置;(2)代码配置;(3)代理配置
    • 线上调试:(1)在URL中添加调试参数;(2)在LocalStorage中根据某些值是否存在来运行和调试代码;(3)对特定的账号进行权限处理以获取调试功能

 

参考资料:

  1. 《前端架构:从入门到微前端》

微信公众号“前端那些事儿”:

 

发布了75 篇原创文章 · 获赞 43 · 访问量 80万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览