脚手架工作过程

实现:

1.创建一个新的仓库目录:

mkdir small-node-js
复制代码

2.初始化项目并生成package.json文件

 yarn init --yes
复制代码

3.创建cli.js文件,并将其路径添加到package.json中bin对应的值

{
    "name": "small-node-js",
    "version": "1.0.0",
    "main": "index.js",
    "bin": "lib/cli.js",
    "license": "MIT",
    "devDependencies": {},
    "dependencies": {
      "ejs": "^3.1.3",
      "inquirer": "^7.3.3"
    }
}
复制代码

4.编写cli.js中的内容

  1. 通过命令行交互询问用户问题
  2. 根据用户回答的结果生成文件
 #!/usr/bin/env node

  const path = require('path')
  const fs = require('fs')  // 读取文件
  const inquirer = require('inquirer') // 发起命令行交互询问
  const ejs = require('ejs') // 模板引擎
  inquirer.prompt([
    {
      type: 'input',
      name: 'title',
      message: 'Project name?'
    },
    {
      type: 'input',
      name: 'name',
      message: 'your name?'
    },
    {
      type: 'input',
      name: 'age',
      message: 'your age?'
    },
  ]).then(answer => {

    // 模板目录
    const tempDir = path.join(__dirname, 'templates')
    // 目标目录  --当前文件夹路径
    const destDir = process.cwd()

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

5.创建模板文件index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title><%= title %></title>
    </head>
    <body>
      <p><%= name %></p>
      <p><%= age %></p>
    </body>
  </html>
复制代码

6.执行yarn link命令将该cli程序link到全局

yarn link
复制代码

7.在命令行中执行small-node-js,,并根据提示输入相应的值,则会在项目根目录下创建由该模板生成的index.html

注意:
1.这里是重新再开个目录, 在目录里面执行全局的small-node-js
2.如果报错,检查下yarn是否设置了全局环境变量
复制代码
 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>nodejs</title>
    </head>
    <body>
      <p>Tom</p>
      <p>18</p>
    </body>
  </html>
复制代码

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享