乐趣区

关于前端:前端工程化笔记

一、谈谈你对工程化的初步意识,联合你之前遇到过的问题说出三个以上工程化可能解决问题或者带来的价值。

 所有以提高效率、降低成本、品质保障为目标的伎俩都属于「工程化」。

次要解决问题:

  • 传统语言或语法的弊病

如想要应用 ES6+ 新个性,但兼容有问题;想要应用 Less/Sass/PostCSS 加强 CSS 的编程性,然而运行环境不能间接反对

  • 无奈应用模块化 / 组件化

想要应用模块化的形式进步我的项目的可维护性,但运行环境不能间接反对

  • 反复的机械式工作

部署上线前须要手动压缩代码及资源文件,部署过程须要手动上传代码到服务器

  • 代码格调对立、质量保证

多人合作开发,无奈硬性对立大家的代码格调,从仓库 pull 回来的代码品质无奈保障

  • 依赖后端服务接口反对

局部性能开发时须要期待后端服务接口提前完成

  • 整体依赖后端我的项目

二、你认为脚手架除了为咱们创立我的项目构造,还有什么更深的意义?

从以下几个阶段说起:

创立我的项目

  • 创立我的项目构造
  • 创立特定类型文件

编码

  • 格式化代码
  • 校验代码格调
  • 编译 / 构建 / 打包;

预览 / 测试

  • Web Server/Mock
  • Live Reloading/HMR
  • SourceMap

提交

  • Git Hooks
  • Link-staged
  • 继续集成

部署

  • CI/CD
  • 主动公布

三、概述脚手架实现的过程,并应用 NodeJS 实现一个自定义的小型脚手架工具

工作过程:

通过命令行交互询问用户问题 -> 依据用户答复的后果生成文件 -> 动静生成我的项目文件

NodeJS 自定义小型脚手架
根本用法如下:

mkdir myself-cli
cd myself-cli
yarn init


在生成的 package.json 文件中增加 “bin” 字段指定入口文件”cli.js“,
增加 “cli.js” 文件,Node CLI 利用入口文件必须要有这样的文件头

#!/usr/bin/env node 

文件内容实现后

yarn link // 公布到全局
myself-cli // 执行 

继续更新中……

退出移动版