一、安裝配置檔案--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. 大功告成，這只是一個簡單的腳手架，後面會繼續完善