高级资深前端必备知识【开发脚手架及封装自动化构建工作流】

简答题

• 谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。 

工程化是根据业务特点，将前端开发流程规范化，标准化，它包括了开发流程，技术选型，代码规范，构建发布等，用于提升前端工程师的开发效率和代码质量。 

1. 制定各项规范，编码规范，开发流程规范，前后端接口规范等等

2. 使用版本控制工具 git，commit描述规范

3. 使用合适前端技术和框架，提高生产效率，降低维护难度，采用模块化，组件化，数据分离等

4. 代码可测试，单元测试，端到端测试等

5. 开发部署自动化

• 你认为脚手架除了为我们创建项目结构，还有什么更深的意义？ 

1. 减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件
2. 可以根据交互动态生成项目结构和配置文件
3. 多人协作更为方便，不需要把文件传来传去 

编程题 

•  概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具

1. 首先创建目录 初始化 yarn init 创建出 package.json
2. 在package.json中 输入 bin入口 

     {
       //...
       "bin": "lib.js",
       //...
     }

    

3. 在根目录创建 lib.js文件 添加bin 入口标识

   #!/usr/bin/env node
   
   //fs模块是Node.js的一个核心模块,专门用来操作系统中的文件,常用的操作方式是对文件的读取和写入使用require('fs')载入fs模块,模块中所有方法都有同步和异步两种形式
   //参考网址：https://blog.csdn.net/qq_45040919/article/details/109751579
   const fs = require('fs')
   
   //一个路径模块，包含路径解析，路径截个、合并，获取绝对、相对路径等等
   //参考网址：https://blog.csdn.net/qq_34629352/article/details/56017209
   const path = require('path')
   
   //一个使用界面进行交互的命令行集合
   //参考网址：https://blog.csdn.net/weixin_30433075/article/details/99067266
   const inquirer = require('inquirer')
   
   //EJS 是后台模板，可以把我们数据库和文件读取的数据显示到 Html 页面上面（解析页面视图模板）。它是一个第三方模块，需要通过 npm 或 yarn 安装
   //参考网址：https://blog.csdn.net/houyanhua1/article/details/79451965
   const ejs = require('ejs')
   
   inquirer.prompt([
     {
       type: 'input',
       name: 'name',
       message: 'Project name?'
     },
     {
       type: 'list',
       name: 'theme',
       message: 'Select the theme color',
       choices: ['Dark', 'Light'],
       filter: function (val) {
         return val.toLowerCase();
       },
     },
     {
       type: 'checkbox',
       message: 'Select what to include',
       name: 'content',
       choices: [
         {
           name: 'Header',
         },
         {
           name: 'Body',
         },
         {
           name: 'Footer',
         },
       ],
       validate: function (answer) {
         if (answer.length < 1) {
           return 'You must choose at least one content.';
         }
   
         return true;
       },
     },
     
   ])
   .then(anwsers => {
     const tmplDir = path.join(__dirname, 'templates')
     const destDir = process.cwd()
   
     fs.readdir(tmplDir, (err, files) => { //readdir()异步的方式读取目录中的子文件和目录
       if (err) throw err
       files.forEach(file => { //path.join()路径结合、合并，路径最后不会带目录分隔符
         ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
           if (err) throw err
   
           fs.writeFileSync(path.join(destDir, file), result)
         })
       })
     })
   })

    

4. 引入inquirer 模块 创建用户与命令行交互的工具 编写所需问题及字段， yarn add inquirer --dev

5. 创建模板目录templates 将项目文件导入到目录中

6. 引入ejs模块 结合所需功能问题变量 改写 templates 下项目文件 达到所需功能，yarn add ejs --dev

7. 在inquirer回调中 结合nodejs 读写功能 和ejs 模块将问题变量 重写到项目中，yarn add inquirer --dev

8. 然后发布到npm上

•  尝试使用 Gulp 完成项目的自动化构建（查找 gulp 插件：https://gulpjs.com/plugins/）

1. 根据项目结构分析得出前端静态应用