前端工程化浅析

360前端星day4

什么是前端工程化

目标

在前端领域，利用技术不断进步和经验逐步积累带来的各种方案，来解决在项目的开发、测试、维护阶段中遇到的种种低效和繁琐的问题

技术

工程化是一种思想，技术是一种实践。

原因

提效。体现在项目的开发、测试及维护阶段。

从代码混乱、耦合严重、依赖人工到规范化、模块化、组件化和自动化（前端工程化四化）

规范化

规范化，是项目可维护性的基石

版本管理及开发流程规范
编写规范
- 脚本
- 样式
- 目录结构

版本管理

git

版本管理
代码仓库

git flow

基于git，简化操作
活动模型，行为规范
master 主干分支，用户可以使用的代码
develop 开发分支，协作
hotfix 紧急修复master的bug
release develop到master（开发到上线）的临时分支
feature develop的分支

//初始化和创建分支
git flow init
git branch
git checkout develop
//基于develpop新建一个feature
git pull origin develop
git flow feature start f1
//提交和完成
git commit -am 'ADD#PRO-01#add new func'
git push origin feature/f1
git flow feature finish f1
//临时分支release（从开发到上线的过程）
git flow release start 0.0.1
git flow release finish 0.0.1
//hotfix紧急修复
git flow hotfix start fix1

模块化

逻辑相关的代码放在同一个文件中没，当作一个模块。只需关注模块内逻辑的实现，无需考虑变量污染等问题，模块之间可互相调用

CSS模块化

解决方案

核心思想：通过样式生效规则来避免冲突

scoped 原理：DOM节点添加data-v-version属性，.selector=>.selector[data-v-version]
CSS in JS：一种思想，以脚本模块来写样式，甚至有封装好的样式模块可以直接调用，样式=>按规则生成的唯一selector（比如react中css样式作为一个组件）
CSS modules：借助预编译使样式成为脚本中的变量（写css文件，引入styles成为一个js变量最直接styles.xxx，写出的结果.selector => Object.selector | .selector => .main_sub_hash
OOCSS、SMACSS、BEM：BEM(block_element_modifier)，按照规则，手写css，并在模版内增加相应class

Shadow DOM

为元素建立shadow root，内部样式与外部样式完全隔离

JS模块化

解决方案

CommonJS

require('http');
module.exports = xx;

ES Module-loader

//b.js
import {M} from './a.js';
//a.js
export function M() {//...};

组件化

组件化和模块化的核心思想都在于分治，实际带来的好处就是团队协作效率和项目可维护性的提升。组件化开发是Web开发的趋势。

什么是组件

特定逻辑和UI进行的高内聚、低耦合的封装体成为一个组件

UI为主，页面上的一个UI块可以封装成一个组件。比如页面的头部封装成Header组件
逻辑为主，某一个功能逻辑封装成一个组件，比如AutoComplete

自动化

核心思想：机器自动完成的事情绝不让人来做。是工程化的核心

自动初始化比如vue-cli
自动构建（打包）比如webpack
自动测试比如karma，jest
自动部署比如Jenkins

自动化测试

分类：（依次逻辑相关性减少）

单元测试
集成测试
端到端测试
UI 测试

自动化部署

流程

git push
Jenkins收到通知
复制到工作区
创建一个docker镜像
跑测试
发布镜像

自动化初始化

脚手架

自动化构建

写一个基于Node.js的CLI

如何捕获用户输入的参数和命令，并且触发回调？commander库
如何触发询问与用户交互 inquirer库
如何帮我们执行命令？child_process库
如何发送请求？http库
如何增强交互效果 chali,ora...

webpack4

module.exports = {
    mode:'development',
    entry:{
        main:'./src/main.js'
    },
    output:{
        path:path.resolve(_dirnamem,'../dist'),
        filename:'[name].js'
    },
    module:{
        rules:[]
    },
    plugins:[]
}

建议写法

不同环境配置进行区分 webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js
集成进来的工具的插件配置单独放置 .babelrc .eslintrc .postcsstc
env配置使用.browserslistrc

总结

规范化
模块化
组件化
自动化