前端工程化工具

工程化的概念

• 工程化是指项目整体的规划和架构，如webpack只是帮助我们实现工程化的工具。成熟的工程化集成方案（create-react-app，vue-cli等等）

脚手架工具

作用：搭建特定项目类型的骨架

• 1：约定相同组织结构
• 2：相同的开发范式
• 3：相同的模块依赖
• 4：相同的工具配置
• 5：相同的基础代码

常用的脚手架工具

• 1 Yeoman(需要搭配特定类型的generator生成特定的项目) 基本使用

1 基本使用

• yarn global add yo
• yarn global add generator-node(用来生成node项目的生成器)
• yo node (根据提示生成node项目) 2 使用generator-node的sub-generator生成部分文件。（不同的generator具有不同的sub-generator，需要查询对应generator的文档）

• yo node:cli (在项目中生成cli.js,生成cli的基础结构)

自定义generator

• yarn add yeoman-generator(提供了生成器的基类，包含了一些工具函数)
• 创建项目，在项目中创建项目模板文件app/templates/index.js（采用ejs的语法编写模板），创建genreator/app/index.js文件，package.json。

// genreator/app/index.js示例代码
const generator = require('yeoman-generator');

module.export = class extends generator {
    prompting() {
        // yeoman 在询问用户环节调用这个钩子
        // 调用父类的prompt询问用户，与用户输入交互
        return this.prompt([
            {
                type: 'input',
                name: 'name',
                message: '请输入项目名称',
                default: this.appName // 父类中定义，为当前项目文件夹的名字
            }
        ]).then((anwsers) => {
            // 获取到用户输入name对应的value
            this.anwsers = anwsers; // 保存到当前对象下，便于之后使用
        })
    }

    // yeoman自动生成文件是会调用这个钩子，可以在这里写入项目文件
    write () {
        const tpl = this.templatePath('index.js');
        const dest = this.destinationsPath('index.js')
        const data = this.anwsers;
        this.fs.copyTpl(tpl, dest, data)
    }
}

自定义vue-generator

• 创建generator-xx-vue文件夹
• 首先创建一个vue项目，将vue项目的基础代码放到generator-xx-vue的templates文件夹中。
• yarn init (初始化package.json)
• yarn add yeoman-generator
• 在generator-xx-vue文件夹下创建generator/app/index.js

cli开发

• 初始化package.json，定义bin字段的cli入口文件
• 安装并引入inquire，使用inquire.prompt进行询问操作
• 获取询问结果，获取模板文件，获取目标工程文件夹地址process.cwd();

// 获取模板文件夹地址
const templateDir = path.join(__pathName, 'templates');

// 获取项目地址
const destDir = process.cwd();

fs.readdir(templateDir, (err, files) => {
    if (err) throw err;
    
    files.forEach((file) => {
        ejs.renderFile(path.join(templateDir, file), anwsers, (err, result) => {
            console.log(err, result);
            fs.writeFileSync(path.join(destDir, file), result);
        })
    })
})