如何搭建團隊內部的腳手架

1、項目背景

公司不一樣項目組，使用不一樣的技術框架（vue or react）,即使是同一項目組不一樣開發人員由不一樣的開發習慣。最終會致使在項目結構混亂，給其餘人員維護形成了一些沒必要須的維護成本。爲此不少公司開始着手開發本身的腳手架用來初始化項目模板。（不少公司會放在本身的私服鏡像上，這裏演示的就給你們放到npm公共鏡像上，供你們體驗方便。）前端

1.1 鏡像倉庫

npm (npmjs.com)vue

瀏覽器打開，搜索 ncun-cli便可查看node

1.2 腳手架源碼

ncun-cli: 諾春博客主題開發腳手架 (gitee.com)react

ncun-cli: 諾春博客主題開發腳手架 (github.com)git

1.3 框架模板源碼

ncun-cli-vue-demo: NCun主題模板（Vue） (gitee.com)github

ncun-cli-vue-demo: NCun主題模板（Vue） (github.com)shell

ncun-cli-react-demo: NCun主題模板（React） (gitee.com)npm

ncun-cli-react-demo: NCun主題模板（React） (github.com)json

ncun-cli-angular-demo : NCun主題模板（Angular）(gitee.com)瀏覽器

ncun-cli-angular-demo : NCun主題模板（Angular）(github.com)

2、項目演示

2.1 全局安裝

$ npm install ncun-cli -g 
複製代碼

2.2 檢測安裝

$ ncun
複製代碼

2.3 查看版本

$ ncun -v
複製代碼

2.4 建立項目

$ ncun init
複製代碼

2.5 打開項目

2.6 啓動項目

2.7 訪問項目

3、需求分析

因爲公司內部基本都有私服的gitlab,故咱們把每一個技術框架的模板放到私服倉庫上，每一個前端開發人員須要初始化新的項目時，使用公司的腳手架，選擇本身的技術框架，就能初始化一個通用的模板。（這裏主要演示如何實現一個腳手架，若是你有總公司git的訪問權限，其實你能夠直下載模板使用便可，通常每一個部門又有部門的私有倉庫，僅供部門成員訪問。）

3.1 commander

node.js的命令行解決方案，用於自定義命令（如：ncun -v）

3.2 inquirer

一個用戶與命令行交互工具，用於自定義項目名（如：? Project name: ）

3.3 shelljs

從新包裝了child_process,調用系統命令更加簡單（如：git clone ... ）

3.4 ora

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

3.5 chalk

終端字符串樣式插件，可改變終端字符串的顏色（如：chalk.green('NCun init successfully. Now run:')）

4、開發實現

4.1 建立腳手架倉庫

在github上建立ncun-cli倉庫，在本地克隆下來。

$ git clone https://github.com/dianjiu/ncun-cli.git
複製代碼

4.2 初始化項目

此時是一個空項目，咱們進行一下初始化。

$ npm init -y
複製代碼

4.3 修改配置

此時項目中會出一個package.json文件，這裏咱們進行簡單修改。

{
  "name": "ncun-cli",
  "version": "21.06.09",
  "description": "Command line interface for Ncun",
  "main": "lib/ncun",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/dianjiu/ncun-cli"
  },
  "homepage": "https://ncun.fun/",
  "keywords": [
    "blog",
    "cms",
    "ncun",
    "cli"
  ],
  "author": {
    "name": "DianJiu",
    "email": "dianjiu@dianjiu.cc",
    "url": "https://dianjiu.co"
  },
  "bin": {
    "ncun": "bin/ncun"
  },
  "bugs": {
    "url": "https://github.com/dianjiu/ncun-cli/issues"
  },
  "license": "MIT",
  "dependencies": {
  }
}
複製代碼

4.4 添加依賴

而後咱們添加下項目的基礎依賴

$ npm install commander inquirer shelljs ora chalk --save
複製代碼

4.5 優化目錄

在根目錄建立bin,lib文件夾和README.md和templates.json文件，在bin目錄下新建ncun.js文件，在lib文件夾下新建ncun.js和commands文件夾，在commands文件夾下新建init.js文件。目錄結構以下：

4.6 實現命令提示

利用commander插件實現命令提示及基礎命令功能。（/bin/ncun.js）實現代碼以下：

#!/usr/bin/env node
 'use strict';

// const manager = require('../lib/');
// manager.versions();
// console.log(1)
const program = require("commander");
const version = require("../package.json").version;

program
  .version(version, "-v, --version","output the current version")
  // 重寫覆蓋默認的幫助標識和描述
  .helpOption('-h, --help', 'read more information');

program
  .usage('<command>');

program
  .command('init')
  .description("init a ncun blog theme template ")
  .alias('i')
  .action(() => {
    require('../lib/commands/init')
  });

program.parse(process.argv);

if(!program.args.length){
    program.help()
}
複製代碼

4.7 配置模板倉庫

在templates.json中配置不一樣框架的模板倉庫地址及代碼分支。

{
	"tpl": {
		"vue": {
			"url": "https://github.com/dianjiu/ncun-cli-vue-demo.git",
			"branch": "master"
		},
		"react": {
			"url": "https://github.com/dianjiu/ncun-cli-react-demo.git",
			"branch": "master"
		},
		"angular": {
			"url": "https://github.com/dianjiu/ncun-cli-angular-demo.git",
			"branch": "master"
		}
	}
}
複製代碼

4.7 實現初始化功能

在（/lib/commands/init.js）中實現功能，代碼以下：

const { prompt } = require('inquirer');
const program = require('commander');
const shell = require('shelljs');
const ora = require('ora');
const fs = require('fs');
const config = require('../../templates.json')
const chalk = require('chalk')

const option =  program.parse(process.argv).args[0];
const question = [
  {
    type: 'input',
    name: 'template',
    message: 'Template name (you can input one like react, vue, angular):',
    default: typeof option === 'string' ? option : 'ncun-blog-template',
    filter (val) {
      return val.trim()
    },
    validate (val) {
      //檢驗模板中是否存在
      const validate = config.tpl[val];
      if(validate){
        return true
      }
      return chalk.red('Template does not support!');
    },
    transformer (val) {
      return val;
    }
  },
  {
    type: 'input',
    name: 'name',
    message: 'Project name',
    default: typeof option === 'string' ? option : 'ncun-blog-template',
    filter (val) {
      return val.trim()
    },
    validate (val) {
      const validate = (val.trim().split(" ")).length === 1;
      return validate || 'Project name is not allowed to have spaces ';
    },
    transformer (val) {
      return val;
    }
  },
  {
    type: 'input',
    name: 'description',
    message: 'Project description',
    default: 'Vue project',
    validate () {
      return true;
    },
    transformer(val) {
      return val;
    }
  },
  {
    type: 'input',
    name: 'author',
    message: 'Author',
    default: '',
    validate () {
      return true;
    },
    transformer(val) {
      return val;
    }
  }
];

module.exports = prompt(question).then(({template, name, description, author}) => {
  gitUrl = config.tpl[template].url
  branch = config.tpl[template].branch
  const projectName = name;
  const spinner = ora('Downloading please wait... \n');

  spinner.start();
  //克隆模板
  let cmdStr = `git clone -b ${branch} ${gitUrl} ${projectName} `
  // childProcess.exec(cmdStr, function(error, stdout, stderr){
  if(shell.exec(cmdStr).code !== 0){
    shell.echo('Error: Git clone failed');
    shell.exit(1);
  }
  
  
  //讀取package.json
  fs.readFile(`./${projectName}/package.json`, 'utf8', function (err, data) {
    if(err) {
      spinner.stop();
      console.error(err);
      return;
    }

    const packageJson = JSON.parse(data);
    packageJson.name = name;
    packageJson.description = description;
    packageJson.author = author;
    
    //修改package.json
    fs.writeFile(`./${projectName}/package.json`, JSON.stringify(packageJson, null, 2), 'utf8', function (err) {
      if(err) {
        spinner.stop();
        console.error(err);
      } else {
        spinner.stop();
        console.log(chalk.green('NCun init successfully. Now run:'))
        console.log(` ${chalk.yellow(`cd ${projectName}`)} ${chalk.yellow('npm install (or `yarn`)')} ${chalk.yellow('npm run dev (or `yarn dev`)')} `);
      }
    });
  });

  console.log(chalk.green('\n √ Generation completed!'))
});

複製代碼

5、項目總結

目前項目僅作了簡單的實現，且僅支持了vue模板，後續會持續更新優化。具體你們可根據本身的開發習慣進行定製本身的項目模板。本地下載腳手架源碼後，替換模板倉庫地址爲你本身的，使用npm link進行本地模擬調試。