ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

脚手架工作原理

2022-07-14 18:36:55  阅读:185  来源: 互联网

标签:文件 cli js sample 工作 原理 脚手架 scaffolding


脚手架工作原理

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

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

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

脚手架的工作过程

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

步骤

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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有