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. 大功告成，這只是一個簡單的腳手架，后面會繼續完善