脚手架 - 直接用node环境搭建一个简单脚手架

最新推荐文章于 2024-05-26 19:21:51 发布

xuanwuziyou

最新推荐文章于 2024-05-26 19:21:51 发布

阅读量616

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/110347135

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

项目网址：https://gitee.com/big-right-right/scaffolding-sample

一. 一个简单的node脚手架

在需要的目录下执行本脚手架命令(scaffolding-sample)，可接收用户输入，并根据用户输入生成模板文件。

二. 步骤

1. 初始化package.json文件:

yarn init

2. 在package.json中，新增如下 bin 属性:

"bin": "cli.js",

package.json文件：

{
  "name": "scaffolding-sample",
  "version": "1.0.0",
  "main": "index.js",
  "bin": "cli.js",
  "repository": "https://gitee.com/big-right-right/scaffolding-sample.git",
  "author": "252057460@qq.com",
  "license": "MIT",
  "dependencies": {
    "ejs": "^3.1.5",
    "inquirer": "^7.3.3"
  }
}

3. 在项目根目录下新增 cli.js 文件:

#!/usr/bin/env node

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

console.log('cli working!')

4. 执行 yarn link 把本项目存入yarn全局缓存

yarn link

5. 测试执行本cli命令（可正常打印出“cli working!”）

scaffolding-sample

6. 脚手架的工作过程:

1.通过命令行交互询问用户问题

2.根据用户回答的结果生成文件

3.在node中，可询问用户问题的模块可以用 inquirer, 安装该模块:

yarn add inquirer

7. 修改 cli.js文件内容为如下:

#!/usr/bin/env node

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

// 脚手架的工作过程:
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件

const inquirer = require('inquirer')
inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project name?'
    }
])
.then(answers => {
    console.log(answers)
})

8. 项目根目录下新建templage模板文件夹，其中新建两个模板文件：

index.html:

<html>
    <head>
        <title><%= name %></title>
    </head>
    <body>
        
    </body>
</html>

style.css:

.<%=name%>{
    color: pink;
}

9. 修改cli.js文件的内容如下:

#!/usr/bin/env node

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

// 脚手架的工作过程:
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')

inquirer.prompt([ // 1. 通过命令行交互询问用户问题
    {
        type: 'input',
        name: 'name',
        message: 'Project name?'
    }
])
.then(answers => { // 2. 根据用户回答的结果生成文件
    
    // 模板目录
    const tmlDir = path.join(__dirname, 'templates')
    
    // 目标目录
    const destDir = process.cwd()
    
    // 将模板下文件全部转换到目标目录
    fs.readdir(tmlDir, (err, files) => {
        if(err) throw err
        files.forEach(file => {
            // 通过模板引擎渲染文件 此处使用ejs模板引擎
            ejs.renderFile(path.join(tmlDir, file), answers, (err, result) => {
                if(err) throw err
                
                // 将渲染结果写入文件
                fs.writeFileSync(path.join(destDir, file), result)
            })
        })
    })
})