360前端星计划之前端工程化

• 目标：前端领域，利用技术不断进步和经验逐步积累带来的各种方案，解决在项目的开发、测试、维护阶段遇到的种种低效和繁琐的问题
• 工程化是一种思想，技术是一种实践
• 规范化/模块化/组件化/自动化

规范化

• 是项目可维护性的基石
• 版本管理及开发流程规范
  • git（版本管理、代码仓库）
  • git flow（基于git，简化操作；提供活动模型和行为规范）
    
• git flow流程
  • git flow init（初始化），自动生成master和develop
  • git branch
  • git checkout develop（master切换到develop）
  • git flow feature start f1（新建一个feature）
  • git commit （提交）
  • git flow feature finish（合并回develop）
  • git flow release start 0.0.1（在release中修改）
  • git flow release finish（修改的代码同时合并到master和develop）
  • git flow hotfix start fix1（线上紧急修改）
• 编写规范（脚本、样式、目录结构）

模块化

逻辑相关代码放在一个文件中，当做一个模块，只关注模块内逻辑的实现，模块直接可以互相调用

• CSS模块化
  • 通过样式生效规则避免冲突
    • scoped，组件的样式不会影响其他组件
      • DOM节点添加data-v-version属性
    • CSS in JS，以脚本模块来写样式，有封装好的样式模块可以直接调用
      • 把样式按照规则生成唯一的selector
    • CSS Modules（借助预编译使样式成为脚本中的变量）
    • Block_Element-Modifier
      • 按照规则手写css
      • 借助可编程的CSS简化BEM写法
  • shadow DOM：为元素建立shadow root，内部样式与外部样式完全隔离
• JS模块化
  • CommonJS（Node.js）：require()
  • ES Module-loader：import …from…

组件化

• 模块和组件都在于分治，一个模块实现一个简单的功能，一个组件由很多模块组成
• 组件
  在Web前端领域， 我们可以将由特定逻辑和UI进行的高内聚、低耦合的封装体称为一个组件
  • UI为主，一个UI块封装成一个组件
  • 逻辑为主，一个功能逻辑封装成一个组件

自动化

• 机器能完成的事情，绝不让人来做，自动化是前端工程化核心
• 自动初始化：vue-cli
• 自动打包：打包
• 自动测试：karma,jest
• 自动部署：Jenkins
• 自动化测试
  
  • 越往上越与逻辑无关
• 自动化部署
  
  • 用户更新
  • Jenkins接收到之后，进行了自动部署
• 自动初始化（脚手架）
• 自动化构建：webpack
• 写一个基于Node.js的CLI
  • 捕获用户输入的参数和命令，获得参数并触发回调（commander）
  • 触发询问与用户交互（inquirer）
  • 执行命令（child_process）
  • 发送HTTP请求（http）
  • 增强交互效果（chalk,ora）
• 使用webpack4进行项目构建
  • mode：模式
  • entry：编译入口
  • output：输出
  • module：rules规则
  • plugins：插件
  • 不同环境的配置进行区分
  • 集成进来的工具的插件配置单独配置
  • env配置使用.browserslistrc文件单独放置

  总结

  使用工程化的思想去思考问题。