360前端星计划—前端工程化浅析（田东东）

1. 前端工程化？

1.1 目标

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

1.2 技术

工程化是一种思想，技术是一种实践。技术会随着时代进步不断地演进和改变。在不同的时期，都会有不同的技术来承载和践行着工程化思想。
思想的落地离不开行动和实践，技术虽然会过时，但是实践必须立足于当下。

1.3 原因

前端工程化是为了提效。这个提效体现在项目的开发、测试及维护阶段。

2. 前端重点关注

前端重点关注：规范化/模块化/组件化/自动化

2.1 规范化

• 版本管理及开发流程规范
  - git：版本管理和代码仓库
  - gitflow：基于git以简化操作，活动模型以行为规范
• 编写规范（脚本、样式、目录结构）

2.2 模块化

一般有CSS模块化/JS模块化。
一般将逻辑相关的代码放在同一文件中，当作同一模块。这样只需要关注模块内部逻辑实现，无序考虑变量污染等问题，模块之间可互相调用。

CSS模块化解决方案： 核心思想是通过样式生效规则来避免冲突。

• scoped：DOM节点添加data-v-version属性
• css in JS：以脚本模块来写样式，甚至有封装好的样式模块可直接调用
• css modules：借助预编译使得样式称为脚本中的变量
• BEM：Block_Element-Modifier, 按照规则，手写css，并在模块内增加相应class(Element 遵从BEM规范，可借助可编程css)

js模块化解决方案： commonJs、ES module-loader规范

2.3 组件化

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

什么是组件？ UI为主封装为一个组件，如页面头部封装成Header组件；逻辑为主，将某个功能封装成组件。
我们可以将由特定逻辑和UI进行的高内聚、低耦合的封装体称为一个组件。

• 侧重UI进行封装的组件，普适性不高
• 侧重逻辑进行封装的组件，普适性高
• 组件内可以包含组件，如偏UI的组件往往包含有偏逻辑的组件

2.4 自动化

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

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

2.4.1 自动化测试

2.4.2 自动化部署

2.4.3 自动化初始化

2.4.4 自动化构建

2.4.5 实例：360搜索专题页开发工具

使用CLI，专门负责项目初始化和上线发布；配置webpack工程满足预编译需求；开发基于webpack4的插件将静态资源上传到公司CDN。

使用webpack4进行项目构建：

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

使用webpack4进行项目构建的建议：

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