前端工程化学习

黄sir儿
147 阅读4分钟

本文也产出自拉勾教育的课程，已经过了三个星期了，学了三个星期了，工程化这一章真的开拓了眼界，拉开很多神秘面纱，觉得收获很大啊，每天进步一点总会追上期望中的自己的

初识工程化

工程化（取代重复的手动工作）真正的意义：
项目的规划与规范-文件的组织结构、源码的开发范式（语法、标准、规范）、前后端分离、搭配工具去实现工程化
eg：vue-cli约定vue项目的结构以及提供工具（热更新的开发服务、自动编译单文件组件、Lint）

工程化的表现

  • 创建项目：使用脚手架自动创建项目结构、特定类型的文件
  • 编码：格式化代码、校验代码风格、编译/构建/打包
  • 预览/测试：热更新的web server/source map/mock
  • 提交：git hooks/lint-stage/持续集成：检查项目质量以及代码质量
  • 部署：CI/CD自动部署

yeoman

yeoman的使用 yeoman就想一个调度器，调度各个generator去生成项目
全局安装yo: npm i -g yo
安装对应的generator: npm i -g generator-node
通过yo运行generator: yo node （这时候就生成了基本的项目了）
生成脚手架,也就是使用Sub Generator进行扩展: yo node:cli （对项目进行扩展）
包可以链接到全局: npm link / sudo npm link(仅用于mac操作系统)
这样就可以使用自己创建的脚手架命令了 自己的是lrb-ci

自定义generator
1、通过npm init初始化项目（项目名必须是generator-），文件下必须generator/app/index.js(核心入口文件)
2、安装yoeman-generator依赖(npm install --save-dev yeoman-generator@4.0，4.0版本稳定)
3、在index.js中通过require导入yoeman-generator

const Generator = require('yeoman-generator');

导出一个继承自Generator类的类型

module.exports =  class extends Generator

4、在这个类型里调用Generator里提供的方法来完成功能实现一个generator的生命周期方法

module.exports =  class extends Generator {
    //Yeoman自动在生成文件阶段调用此方法
    writing () {
        this.fs.write(this.destinationPath('text.txt'), '628开始学习脚手架')
    }
}

5、yoeman-generator在工作时后自动调用我们实现的生命周期方法

脚手架

脚手架的原理，根据一些预设的问题的回答，结合模版文件，生成新的项目结构!!
执行脚手架本质其实就是执行[node 脚手架的入口文件(就是packgae.json中bin字段指定的文件)]命令
比较好的学习文章：
segmentfault.com/a/119000001… mp.weixin.qq.com/s/Rfov1ZMwS…

构建

构建：其实就是转换，把敲的代码转换成浏览器可运行的代码

gulp

gulp(基于流的工作系统)核心工作流程：读取流（读取源文件）->转换流（对文件进行处理，得到想要的结果）->输出流（将处理后的文件写入指定位置）
gulp对流文件的处理和nodejs的一样也是用pipe()
gulp有自己的api处理流文件src()读取流，dest输出流，转换流就是中间的gulp插件
gulp会自己读取gulpfile.js中导出的函数并执行，也就是这些函数对文件进行处理

封装工作流（实现一个自定义脚手架项目，也就是把gulpfile.js封装到一个脚手架中，gulpfile通过配置文件读取传入的配置，然后在脚手架入口文件里调用gulp-cli方法实现构建，需要往process.argv传入当前执行路径和gulpfiel路径）
步骤：

  1. 将项目中gulpfiles.js放入脚手架项目中，例子里改为了lib/index.js，并在把package.json的main指向了该文件
  2. 将gulpfiles.js中原本写死的文件路径或者数据改为读取配置文件里传入的
  3. 创建脚手架入口文件，并将package.json中的bin指向该文件，在这个文件中调用gulp-cli，但在调用钱需要通过process.argv传入cwd和gulpfile的路径
  4. 发布 yarn publish

(ps：

  • __dirname： 获得当前执行文件所在目录的完整目录名
  • __filename： 获得当前执行文件的带有完整绝对路径的文件名
  • process.cwd()：获得当前执行node命令时候的文件夹目录名
  • ./： 文件所在目录
  • process.cwd()和./效果一样
  • .开头表示隐藏文件，像.git、.vuerc )
avatar
文章
阅读
粉丝