如何建立屬於本身的腳手架

原理

咱們每次搭建項目都須要建立項目，而後進行一系列的基礎配置，封裝基礎api ，配置webpack,浪費了不少時間和精力，用本身封裝的腳手架模板就能夠每次像建立vue,react那樣同樣簡單，有能力的還能夠去封裝本身的框架。參考自beleve666大神的文章源碼查看githubhtml

原理就：利用npm封裝插件，拉取咱們在github上託管的項目，拉取完畢後把依賴的.git .svn刪除掉並用node.js更改json參數vue

1. 先上插件依賴

commander:完整的 node.js 命令行解決方案node

download-git-repo：用於下載，git倉庫拉取react

inquirer：用戶與命令行交互的工具webpack

ora：實現node.js 命令行環境的 loading效果，和顯示各類狀態的圖標等git

log-symbols：提供帶顏色的符號github

Chalk：改變文字背景顏色web

node-notifier：通知插件shell

shelljs：能夠調用命令行工具npm

2.先搭一個基礎npm包

npm包發佈教程這裏就很少說了

3.先建立基礎命令

咱們須要將咱們的項目作下改動，首先在packge.json中添加以下內容：

"bin": {
		"template-ma": "index.js"
	},
複製代碼

"template-ma"是你自定義的命令，到這裏還不能使用，必須使用npm link 連接到全局

4.建立入口文件

Index.js文件

#!/user/bin/env node
//你想要你的這個文件中的代碼用什麼可執行程序去運行它
//!/usr/bin/env node會去環境設置尋找node目錄
const commander = require('commander');//引入插件
commander.command('init <name>') // 定義init子命令，<name>爲必需參數可在action的function中接收，如需設置非必需參數，可以使用中括號
    .option('-d, --dev', '獲取開發版') // 配置參數，簡寫和全寫中使用,分割
    .description('建立項目') // 命令描述說明
    .action(function(name,option)){ 
          console.log(name,option)
        //這裏能夠對參數進行操做 
      }
//這裏經過 command定義Init 子命令 當使用 init <name> 的時候 name 會在action中接收，
// option中 是傳遞配置參數，也在action中接收 
//action接收一個回調 action(function(name,option)){ 這裏能夠對參數進行操做 }

//查詢版本號
commander.version(require('./package.json').version,'-v,-V,--version', '查看版本號')  

//這句話必須寫在最後面 提供幫助 -h
commander.parse(process.argv);
複製代碼

這裏能夠運行一下

template-ma init test -d

打印

test true

5.建立執行函數

作一下拆分把action函數提取到外部

//index.js
const initAction = require('./commands/init')
commander.command('init <name>') // 定義init子命令，<name>爲必需參數可在action的function中接收，如需設置非必需參數，可以使用中括號
    .option('-d, --dev', '獲取開發版') // 配置參數，簡寫和全寫中使用,分割
    .description('建立項目') // 命令描述說明
    .action(initAction);
)

複製代碼

commands/init文件

const initAction = async (name, option) => {
}
module.exports = initAction;
複製代碼

6.拉取模板

咱們須要在github上託管本身的腳手架模板而後咱們須要用download-git-repo拉取模板和shelljs工具進行條件判斷

// 檢查控制檯是否能夠運行`git `，
    if (!shell.which('git')) {
        console.log(symbols.error, '對不起，git命令不可用！');
        shell.exit(1);
    }
    // 驗證輸入name是否合法
    if (fs.existsSync(name)) {
        console.log(symbols.warning,`已存在項目文件夾${name}！`);
        return;
    }
    if (name.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) {
        console.log(symbols.error, '項目名稱存在非法字符！');
        return;
    }
    // 獲取option，肯定模板類型（分支）
    if (option.dev) branch = 'develop';

複製代碼

而後是拉取模板

function clone (remote, name, option) {
//三個參數，拉取的路徑，名字 ，分支
    const downSpinner = ora('正在下載模板...').start();
//ora用於輸出loading
    return new Promise((resolve, reject) => {
        download(remote, name, option, err => {
            if (err) {
                downSpinner.fail();
                console.log(symbols.error, chalk.red(err));
                //chalk改變文字顏色
                reject(err);
                return;
            };
            downSpinner.succeed(chalk.green('模板下載成功！'));
            resolve();
        });
    });
  await clone(`direct:${remote}#${branch}`, name, { clone: true });
複製代碼

清理文件

拉取下來後是和遠程倉庫關聯的，因此咱們要把它們刪掉，還有清除一些多餘的文件

const deleteDir = ['.git', '.gitignore', 'README.md', 'docs']; // 須要清理的文件
    const pwd = shell.pwd();
    deleteDir.map(item => shell.rm('-rf', pwd + `/${name}/${item}`));
複製代碼

##根據用戶需求更改配置

這裏用到inquirer能夠與命令行進行交互

咱們能夠設置幾個問題

const questions = [
    {
        type: 'input',
        message: '請輸入模板名稱:',
        name: 'name',
        validate(val) {
        if (!val) return '模板名稱不能爲空！';
        if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名稱包含非法字符，請從新輸入';
        return true;
        }
    },
    {
        type: 'input',
        message: '請輸入模板關鍵詞（;分割）:',
        name: 'keywords'
    },
    {
        type: 'input',
        message: '請輸入模板簡介:',
        name: 'description'
    },
]
複製代碼

經過inquirer獲取到用戶輸入的內容

const answers = await inquirer.prompt(questions);
    // 將用戶的配置打印，確認一下是否正確
    console.log('------------------------');
    console.log(answers);

    let confirm = await inquirer.prompt([
        {
            type: 'confirm',
            message: '確認建立？',
            default: 'Y',
            name: 'isConfirm'
        }
    ]);
 if (!confirm.isConfirm) return false;
複製代碼

咱們拿到用戶輸入的值就能夠根據用戶的參數進行更改

//簡單的讀取操做 就不過多描述了
 let jsonData= fs.readFileSync((path.join(__dirname,'./'), 'malunan/package.json'),function(err,data){
       console.log(err)
    })
    jsonData=JSON.parse(jsonData)
    for(item in answers){
        jsonData[item]=answers[item]
    }
    let obj=JSON.stringify(jsonData,null,'\t')
    let sss=fs.writeFileSync((path.join(__dirname,'./'), 'malunan/package.json'),obj,function(err,data){
        console.log(err,data)
    })
複製代碼

這樣咱們就根據用戶的參數，寫入到了package.json文件其餘的用途可自行開發

##自動安裝依賴

const installSpinner = ora('正在安裝依賴...').start();
    if (shell.exec('npm install').code !== 0) {
        console.log(symbols.warning, chalk.yellow('自動安裝失敗，請手動安裝！'));
        installSpinner.fail(); // 安裝失敗
        shell.exit(1);
    }
    installSpinner.succeed(chalk.green('依賴安裝成功！'));

    //切入後臺的時候給用戶提示
    notifier.notify({
        title: 'YNCMS-template-cli',
        icon: path.join(__dirname, 'coulson.png'),
        message: ' ♪(＾∀＾●)ﾉ 恭喜，項目建立成功！'
    });

    // 自動打開編輯器
    if (shell.which('code')) shell.exec('code ./');
    shell.exit(1);

複製代碼

這樣腳手架就搭建完畢了，能夠在本地 template-ma init <name> 試一下效果

##源碼 index.js

#!/usr/bin/env node

const commander = require('commander');
const initAction = require('./commands/init')
//查詢版本號
commander.version(require('./package.json').version,'-v,-V,--version', '查看版本號')  
commander.command('init <name>') // 定義init子命令，<name>爲必需參數可在action的function中接收，如需設置非必需參數，可以使用中括號
    .option('-d, --dev', '獲取開發版') // 配置參數，簡寫和全寫中使用,分割
    .description('建立項目') // 命令描述說明
    .action(initAction);


//這句話必須寫在最後面 提供幫助 -h
commander.parse(process.argv);
複製代碼

clone.js

// utils/clone.js
const download = require('download-git-repo');
const symbols = require('log-symbols');  // 用於輸出圖標
const ora = require('ora'); // 用於輸出loading
const chalk = require('chalk'); // 用於改變文字顏色
module.exports = function (remote, name, option) {
    const downSpinner = ora('正在下載模板...').start();
    return new Promise((resolve, reject) => {
        download(remote, name, option, err => {
            if (err) {
                downSpinner.fail();
                console.log(symbols.error, chalk.red(err));
                reject(err);
                return;
            };
            downSpinner.succeed(chalk.green('模板下載成功！'));
            resolve();
        });
    });
  };
複製代碼

init.js

// commands/init.js
const shell = require('shelljs');
const symbols = require('log-symbols');
const clone = require('../utils/clone.js');
const remote = 'https://github.com/MaLunan/components.git';
const fs =require('fs')
const ora = require('ora'); // 用於輸出loading
const chalk = require('chalk'); // 用於改變文字顏色
const notifier =require('node-notifier')
const path = require('path')
let branch = 'master';

const initAction = async (name, option) => {
    // 0. 檢查控制檯是否能夠運行`git `，
    if (!shell.which('git')) {
        console.log(symbols.error, '對不起，git命令不可用！');
        shell.exit(1);
    }
    // 1. 驗證輸入name是否合法
    if (fs.existsSync(name)) {
        console.log(symbols.warning,`已存在項目文件夾${name}！`);
        return;
    }
    if (name.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) {
        console.log(symbols.error, '項目名稱存在非法字符！');
        return;
    }
    // 2. 獲取option，肯定模板類型（分支）
    if (option.dev) branch = 'develop';
    // 4. 下載模板
    await clone(`direct:${remote}#${branch}`, name, { clone: true });

    // 5. 清理文件
    const deleteDir = ['.git', '.gitignore', 'README.md', 'docs']; // 須要清理的文件
    const pwd = shell.pwd();
    deleteDir.map(item => shell.rm('-rf', pwd + `/${name}/${item}`));
    const inquirer = require('inquirer');
    // 定義須要詢問的問題
    const questions = [
    {
        type: 'input',
        message: '請輸入模板名稱:',
        name: 'name',
        validate(val) {
        if (!val) return '模板名稱不能爲空！';
        if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名稱包含非法字符，請從新輸入';
        return true;
        }
    },
    {
        type: 'input',
        message: '請輸入模板關鍵詞（;分割）:',
        name: 'keywords'
    },
    {
        type: 'input',
        message: '請輸入模板簡介:',
        name: 'description'
    },
    // {
    // type: 'list',
    // message: '請選擇模板類型:',
    // choices: ['響應式', '桌面端', '移動端'],
    // name: 'type'
    // },
    // {
    // type: 'list',
    // message: '請選擇模板分類:',
    // choices: ['整站', '單頁', '專題'],
    // name: 'category'
    // },
    // {
    // type: 'input',
    // message: '請輸入模板風格:',
    // name: 'style'
    // },
    // {
    // type: 'input',
    // message: '請輸入模板色系:',
    // name: 'color'
    // },
    {
        type: 'input',
        message: '請輸入您的名字:',
        name: 'author'
    }
    ];
    // 經過inquirer獲取到用戶輸入的內容
    const answers = await inquirer.prompt(questions);
    // 將用戶的配置打印，確認一下是否正確
    console.log('------------------------');
    console.log(answers);

    let confirm = await inquirer.prompt([
        {
            type: 'confirm',
            message: '確認建立？',
            default: 'Y',
            name: 'isConfirm'
        }
    ]);
    if (!confirm.isConfirm) return false;
    //根據用戶配置調整文件
   let jsonData= fs.readFileSync((path.join(__dirname,'./'), 'malunan/package.json'),function(err,data){
       console.log(err)
    })
    jsonData=JSON.parse(jsonData)
    for(item in answers){
        jsonData[item]=answers[item]
    }
    console.log(jsonData)
    console.log(path.join(__dirname,`${name}/`))
    let obj=JSON.stringify(jsonData,null,'\t')
    let sss=fs.writeFileSync((path.join(__dirname,'./'), 'malunan/package.json'),obj,function(err,data){
        console.log(err,data)
    })
    //自動安裝依賴
    const installSpinner = ora('正在安裝依賴...').start();
    if (shell.exec('npm install').code !== 0) {
        console.log(symbols.warning, chalk.yellow('自動安裝失敗，請手動安裝！'));
        installSpinner.fail(); // 安裝失敗
        shell.exit(1);
    }
    installSpinner.succeed(chalk.green('依賴安裝成功！'));

    //切入後臺的時候給用戶提示
    notifier.notify({
        title: 'YNCMS-template-cli',
        icon: path.join(__dirname, 'coulson.png'),
        message: ' ♪(＾∀＾●)ﾉ 恭喜，項目建立成功！'
    });

    // 8. 打開編輯器
    if (shell.which('code')) shell.exec('code ./');
    shell.exit(1);
};


module.exports = initAction;
複製代碼