首页 > 其他分享> > 脚手架工作原理

脚手架工作原理

2022-07-14 18:36:55 作者：互联网

脚手架工作原理

脚手架工具就是在启动它之后自动询问一些预设的问题，然后将回答的结果结合一些模板文件生成一个项目的结构。

通过 node.js 开发一个小型的脚手架工具

脚手架工具就是一个cli应用，创建脚手架工具就是创建一个cli的应用。

脚手架的工作过程

通过命令行交互询问用户问题
根据用户回答的结果生成文件

步骤

mkdir sample-scaffolding

cd sample-scaffolding

yarn init -y

code .   // 此命令打开package.json这个文件

# package.json文件中添加一个bin字段

"bin":"cli.js",用于指定cli应用的入口文件

然后添加 cli.js这个文件

配置 package.json

// "bin": "cli.js",
{
  "name": "sample-scaffolding",
  "version": "1.0.0",
  "bin": "cli.js",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "ejs": "^2.6.2",
    "inquirer": "^7.0.0"
  }
}

将 cli 模块链接全局

yarn link

此时在命令行中去使用 sample-scaffolding 这个命令，控制台打印 console.log('cli working!')，则意味着 cli 应用的基础就完成了。若不成功，则需要加入以下引用：

#!/usr/bin/env node // 作用就是可以被当成一个命令执行, 而不用 node  cli.js 这样执行

安装依赖包

inquirer: 发起命令行询问
ejs: 模板引擎

yarn add inquirer

yarn add ejs

编写 cli.js

sample-scaffolding/cli.js

#!/usr/bin/env node

// Node CLI 应用入口文件必须要用这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限 755
// 具体就是通过 chmod 755 cli.js 实现修改

// console.log('cli working!')

const fs = require('fs')
const path = require('path')
const ejs = require('ejs')
const inquirer = require('inquirer')

inquirer.prompt([
  {
    type: 'input',
    name: 'name',
    message: 'Project name?'
  }
])
.then(anwsers => {
  // 根据用户回答的结果生成文件

  // 模板目录
  const tmplDir = path.join(__dirname, 'templates')
  // 目标目录
  const destDir = process.cwd()

  // 将模板下的文件全部转换到目标目录
  fs.readdir(tmplDir, (err, files) => {
    if (err) throw err
    files.forEach(file => {
      // 通过模板引擎渲染文件
      ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
        if (err) throw err
        
        // 将结果写入目标文件路径
        fs.writeFileSync(path.join(destDir, file), result)
      })
    })
  })
})

准备模板文件

sample-scaffolding/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= name %></title>
</head>
<body>
  
</body>
</html>

sample-scaffolding/templates/style.css

body {
  margin: 0;
  background-color: #f8f9fb;
}

测试

cd ..

mkdir demo-sample

cd demo-sample

sample-scaffolding

根据提示交互信息输入name，接着去 demo-sample 文件夹下查看，模板文件已生成。

附录

解决 yarn link 将 cli 模块链接全局后无法使用的问题

标签：文件,cli,js,sample,工作,原理,脚手架,scaffolding
来源： https://www.cnblogs.com/dwyWeb/p/16478866.html