前端工程化-脚手架工作原理

100 阅读1分钟

        通过对一些脚手架工具的分析,不难发现大部分脚手架工具的工作原理都很简单。无外乎就是在启动它过后会自动的询问一些预设的问题,然后将用户回答的结果结合一些模版文件,生成一个项目的结构。

       脚手架工具本质上就是一个node cli 应用,去创建一个脚手架工具就是创建一个 node cli 应用。具体实现就是在项目的 package.json文件中添加一个 bin 字段,用于去指定这个cli应用的入口文件。然后就创建这个js文件,cli的入口文件需要又一个特别的文件头 #!/usr/bin/env node 然后通过yarn link 将这个模块 link 到全局。后面来实现脚手架的工作过程,包含这些方面的内容:通过命令行交互询问用户问题、根据用户回答的结果生成文件

// cli.js
const fs = require('fs')
const inquirer = require('inquirer')
const path = require('path')
const ejs = require('ejs')
inquirer.prompt([
    {
        type: 'input',
        name: 'filename',
        message: 'project name'
    }
])
.then(answers => { // 根据用户的回答生成文件
    // 模版目录
    const templDir = path.join(_dirname, 'templates')
    // 目标目录
    const destDir = process.cwd()
    // 将模版文件夹下的文件全部转换到目标目录
    fs.readdir(templDir, (err, files) => {
        if (err) throw err
        files.forEach(file => {
            // 通过模版引擎渲染文件
            ejs.renderFile(
                path.join(templDir, file),
                answers,
                (err, result) => {
                    if (err) throw err
                    // 将结果
                    fs.writeFileSync(
                        path.join(destDir, file),
                        result
                    )
                }
            )
        })
    })
})