从0开始搭建脚手架

最新推荐文章于 2023-04-17 21:57:44 发布

易风有点疯

最新推荐文章于 2023-04-17 21:57:44 发布

阅读量125

点赞数 1

分类专栏：前端学习文章标签： javascript 前端 node.js

本文链接：https://blog.csdn.net/Big_YiFeng/article/details/125760700

版权

前端学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

第一步：新建一个项目，然后使用 npm link 将此项目本地可用

npm init
新建文件 /bin/mvc.js
package.json 中设置起始文件 bin:‘bin/mvc.js’
npm link

第二步：使用 inquirer 插件进行命令行交互

安装

 npm install inquirer --dev # yarn add inquirer --dev

bin/mvc.js

#! /usr/bin/env node
const inquirer = require("inquirer");

inquirer
  .prompt([
    {
      type: "input", //type： input, number, confirm, list, checkbox ...
      name: "name", // key 名
      message: "请输入你要建的项目名", // 提示信息
      default: "yf-cli-product", // 默认值
    },
  ])
  .then(answers => {
    // 打印互用输入结果
    console.log(answers);
  });

第三步：新建模板目录，根据目录生成对应文件

新建模版文件夹

mkdir templates # 创建模版文件夹

3.2 新建 index.html 和 common.css 两个简单的示例文件

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

/* common.css */
body {
  margin: 20px auto;
  background-color: azure;
}

接着完善文件生成逻辑

#! /usr/bin/env node
const inquirer = require("inquirer");
const path = require("path");
const fs = require("fs");
const ejs = require("ejs");

inquirer
  .prompt([
    {
      type: "input", //type： input, number, confirm, list, checkbox ...
      name: "name", // key 名
      message: "请输入你要建的项目名", // 提示信息
      default: "yf-cli-product", // 默认值
    },
  ])
  .then(answers => {
    // 模版文件目录
    const destUrl = path.join(__dirname, "../templates");
    // 生成文件目录
    // process.cwd() 对应控制台所在目录
    const cwdUrl = process.cwd();
    // 从模版目录中读取文件
    fs.readdir(destUrl, (err, files) => {
      if (err) throw err;
      files.forEach(file => {
        // console.log('file',file);
        // 使用 ejs 渲染对应的模版文件
        // renderFile（模版文件地址，传入渲染数据）
        ejs.renderFile(path.join(destUrl, file), answers).then(data => {
          // console.log('--------------------------------------------------------');
          // console.log('data',data);
          // 生成 ejs 处理后的模版文件
          fs.writeFileSync(path.join(cwdUrl, file), data);
        });
      });
    });
  });