Node.js 搭建脚手架

一、安装配置文件--package.json

git init

 

二、项目名：generator-make

三、打开vscode

code .

　　

四、修改package.json文件，新增 bin 

{
  "name": "generator-make",
  "version": "1.0.0",
  "bin": "cli.js",
  "main": "index.js",
  "author": "****",
  "license": "MIT",
  "dependencies": {

  }
}

 

 敲黑板：bin的作用

 

五、新增 cli.js 文件

#!/usr/bin/env node

console.log('Enter')

 

六、测试 cli.js 内部文件是否可以被读取

$ generator-make

// 成功

结果：Enter  

// 失败
bad interpreter: No such file or directory // 提示没有找到文件

 

以上导致失败的原因需要先知道：#!/usr/bin/env node 是什么

 

七、完整代码 cli.js

#!/usr/bin/env node

// 命令行询问
const inquirer = require('inquirer')
// 模版引擎
const ejs = require('ejs')

// 发起命令行的询问
inquirer.prompt([
  {
    type: 'input', // 问题的输入方式
    name: 'name', // 问题返回的键
    message: 'Project name?' // 屏幕的提示
  }
]).then(anwsers => {
  // 根据用户回答的结果生成文件

  // 模版目录
  const tmpDir = path.join(__dirname, 'templates')
  // 输出目录
  const destDir = process.cwd()

  // 将模块的全部文件转换到目标目录
  fs.readdir(tmpDir, (err, files) => {
    if (err) throw err
    files.forEach(file => {
      console.log('templates下的具体文件', file)
      // 通过模版引擎去渲染
      ejs.renderFile(path.join(tmpDir, file), anwsers, (err, result) => {
        if (err) throw err
        // 写入文件
        fs.writeFileSync(path.join(destDir, file), result)
      })
    });
  })
})

　　

八、将 generator-make 全局使用

$ yarn link

// 成功
info You can now run `yarn link "generator-make"` in the projects where you want to use this package and it will be used instead.

　　

九、测试 generator-make 全局是否可以

$ generator-make --help

// 成功

  脚手架

  Usage
    $ generator-make [input]

  Options
    --foo  Lorem ipsum. [Default: false]

  Examples
    $ generator-make
    unicorns
    $ generator rainbows
    unicorns & rainbows

// 失败
Permission denied // 没有权限

 

解决办法：

1. 回到上一级目录

$ cd ..

2. 给generator-make权限

sudo chmod -R 777 generator-make

3. 回到generator-make项目内再次测试

$ generator-make --help

　　

十、测试脚手架是否可用

1. 在桌面新建一个 my-name 文件夹

2. 在命令行中输入

$ generator-make

? Project name? bar

3. bar 文件生成成功，我们可以看到 index.html 与 style.css 两个文件

4. 打开 index.html 源码，我们可以看到 title 的 name 已经改了

5. 大功告成，这只是一个简单的脚手架，后面会继续完善