讲述怎么搭建私有脚手架及附属知识

我踩过的前端碰到的工程化知识

为了做这个功能，还特意写了去查了为什么叫脚手架，原来来自于工程术语。

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

工作中，经常有很多个项目，但是每个项目中公共的部分都得手动复制、粘贴，还得调试，导致工作量增大、效率也不高，所以考虑定制脚手架。

定制脚手架的作用：

可以快速生成项目节约时间，提升开发效率
统一规范
方便npm版本项目升级
封装组件、工具等
直接执行命令就可以，不用再去打开git地址
形成自动化也可以减少错误

做这个之前，先得学习几个常用重要工具库。

常用工具库

commander：参数解析 --help其实就借助了他~ 解析用户输入的命令**

const program = require('commander')
program
  // 定义命令和参数
  .command('create <app-name>')
  .description('create a new project')
  // -f or --force 为强制创建，如果创建的目录存在则直接覆盖
  .option('-f, --force', 'overwrite target directory if it exist')
  .action((name, options) => {
      // 在 operation.js 中执行创建任务
       require('./operation.js')(name, options)
  })  
program
   // 配置版本号信息
  .version(`v${require('../package.json').version}`)
  .usage('<command> [option]')
// 解析用户执行命令传入参数
program.parse(process.argv);

inquirer：交互式命令行工具，可以实现命令行的选择功能 type包含input,confirm,list,rawlist,checkbox,password等

//type: 'input'
const inquirer = require('inquirer')

// 此处测试input，实践过程中输入testinquirer
inquirer.prompt([
    {
      type: 'input', //type：input,confirm,list,rawlist,checkbox,password...
      name: 'name', // key 名
      message: 'Your name in here', // 提示信息
      default: 'my-node-cli' // 默认值
    }
  ]).then(answers => {
      console.log(answers)
    // {name:'testinquirer'}
  })

// type: 'list'
let repos = []
 const { repo } = await inquirer.prompt({
      name: 'repo',
      type: 'list',
      choices: repos,
      message: 'Please choose a template to create project'
})

download-git-repo：拉取GitHub上的文件

download-git-repo 是不支持 promise的，所以需要进行 promise 化改造

const util = require('util')
const downloadGitRepo = require('download-git-repo')
let downloadGitRepo = util.promisify(downloadGitRepo);

downloadGitRepo(repository, destination, options, callback) 下载一个 git repository 到 destination 文件夹，配置参数 options, 和 callback回调。

可以采用下面简写方式

GitHub - github:owner/name 或者 owner/name
GitLab - gitlab:owner/name
Bitbucket - bitbucket:owner/name

1、默认是 master 分枝, 但你可以指定分枝和tag ，如 owner/name#my-branch.

2、你还可以指定自定义来源，如 gitlab:custom.com:owner/name. 自定义来源默认为 https 或 git@ , 你也可以自己之定义协议.

使用http 下载 Github repository master 分枝

downloadGitRepo('myusername/myproject', 'test/tmp', function (err) {
  console.log(err ? 'Error' : 'Success')
})

使用http下载 github 不需要加上域，因为不需要自定义来源仓库

使用 http 下载 GitLab 自定义来源仓库，并附带 token

downloadGitRepo('gitlab:mygitlab.com:myusername/myproject#my-branch', 'test/tmp', { headers: { 'PRIVATE-TOKEN': '1234' } } function (err) {
  console.log(err ? 'Error' : 'Success')
})

使用 git clone 下载 Bitbucket repository my-branch 分枝.

//带上分支或者tag，后面用#拼接
downloadGitRepo('bitbucket:myusername/myproject#my-branch', 'test/tmp', { clone: true }, function (err) {
  console.log(err ? 'Error' : 'Success')
})

使用git clone 下载自定义来源和协议 GitLab 仓库. 如果clone 一个自定义来源的仓库，type (github, gitlab 等.) 不是必须的

downloadGitRepo('https://mygitlab.com:myusername/myproject#my-branch', 'test/tmp', { clone: true }, function (err) {
  console.log(err ? 'Error' : 'Success')
})

我觉得最常用的可以用git clone这种，很符合我们的项目下载习惯。

还可以使用direct:url方式，可参考 download-git-repo 使用教程

chalk：在控制台中画出各种各样的颜色

const chalk = require('chalk')
chalk.level = 2  //必须要设置的，不然看不到颜色

// 文本样式
console.log("project name: " + chalk.bold(name))

// 颜色
console.log("project name:" + chalk.green(name))

// 背景色
console.log("project name:" + chalk.bgRed(name))

// 使用RGB颜色输出
console.log("project name: " + chalk.rgb(4, 156, 219).underline(name));
console.log("project name:" + chalk.hex('#049CDB').bold(name));
console.log("project name:" + chalk.bgHex('#049CDB').bold(name))

ora：小图标（loading、succeed、warn等） 在window系统上图标仅仅是横杠，没有动态样子，所以不要有疑惑

const ora = require('ora')
const message = 'Loading unicorns'

const spinner = ora(message);
// 开始加载动画
spinner.start();

setTimeout(() => {
    // 修改动画样式
    // Type: string
    // Default: 'cyan'
    // Values: 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white' | 'gray'
    spinner.color = 'red';    
    spinner.text = 'Loading rainbows'; 
    // 这里怎么没生效?难道是版本改了？看官网window系统确实就是用横线代替spinner，不支持设置，颜色也不支持
   try {
    const result = await fn(...args);
    spinner.stop() // 停止
    // 状态为修改为成功
    spinner.succeed();
    return result; 
  } catch (error) {
      spinner.stop() // 停止
    // 状态为修改为失败
    spinner.fail('请求失败, 重新抓取 ...')
     // spinner.warn('提示');  //提示 ⚠
    // spinner.info('信息');  //信息 ℹ
  } 
}, 2000);

异步执行（比如下载）的时候可使用它，体验更好

fs-extra：对文件进行处理，比如判断文件、文件夹是否存在及删除等，fs模块可以使用

const fs = require('fs-extra')
// process.cwd();当前命令行选择的目录
// 需要创建的目录地址
const addr  = path.join(process.cwd(), 'myFileName')

// 判断文件是否已经存在？
if (fs.existsSync(addr)) {}
fs.remove(addr)

cross-spawn: 可以用来自动执行 shell 命令

//定义需要按照的依赖
const dependencies = ['vue', 'vue-router'];
// 执行安装
const child = spawn('npm', ['install', '-D'].concat(dependencies), { 
    stdio: 'inherit' 
});

//const child = spawn('npm', ['list', '-g', '-depth', '0'], { stdio: 'inherit' });

// 监听执行结果
child.on('close', function(code) {
    // 执行失败
    if(code !== 0) {
        console.log(chalk.red('安装依赖时候出错!'));
        process.exit(1);
    }else {
        console.log(chalk.cyan('安装成功'))   
    }
})

process.cwd() 是当前执行node命令时候的文件夹地址 ——工作目录，保证了文件在不同的目录下执行时，路径始终不变
__dirname 是被执行的js 文件的地址 ——文件所在目录，当前模块的目录名。等同于path.dirname()，__dirname` 实际上不是一个全局变量，而是每个模块内部的。

还有其他metalsmith（读取所有文件，实现模板渲染）、consolidate（统一模板引擎）等

以上工具，console输出最好都有英文，防止有些系统文字出现乱码。

怎么获取gitlab中项目信息

先得获得个人访问令牌
获取访问接口必须拼接private_token

//获取50页前的项目
http://mygitlabserver/api/v4/projects?private_token=jFtxwX7aKTr8iiNm7r9J&per_page=50

//获取某个项目
http://mygitlabserver/api/v4/projects/1617

更多查看gitlab文档官网

写这个的目的是为了获取gitlab中的项目信息，通过信息读取要下载的项目模板。

npm

npm库中全局安装

npm i my-node-cli -g

本地模块全局安装

npm link

npm link用法

本地测试模块的时候很方便

cd npm-link-module
npm link

执行命令后，npm-link-module会根据package.json上的配置，被链接到全局

在项目npm-link-example中使用模块pm-link-module

npm link pm-link-module

定制公司的项目框架

基于Vue-cli框架，用渐进式开发思想，根据项目的业务做差异化，逐渐下沉到框架中（融入自己的api、组件等），然后升级框架。

如果团队需要以下要求，可以按照自己公司业务定制框架，这也体现了架构能力。

统一的技术选型
统一的默认配置
统一的部署方案
统一的代码风格

搭建自己的脚手架

整个思路：

执行命令（command、chalk工具），command提示create一个项目

program
  // 定义命令和参数
  .command('create <app-name>')
  .description('create a new project')
  // -f or --force 为强制创建，如果创建的目录存在则直接覆盖
  .option('-f, --force', 'overwrite target directory if it exist')
  .action((name, options) => {
      // 在 create.js 中执行创建任务
    require('./create.js')(name, options)
  })  
program
   // 配置版本号信息
  .version(`v${require('../package.json').version}`)
  .usage('<command> [option]')
  
// 解析用户执行命令传入参数
program.parse(process.argv);

判断此名是否存在，不存在直接往下查模板列表，存在判断是否强制覆盖，不覆盖啥都不做，覆盖就删除本地（fs-extra、chalk工具）

  if (fs.existsSync(targetAir)) {
    // 是否为强制创建？
    if (options.force) {
      await fs.remove(targetAir)
    } else {
      // 询问用户是否确定要覆盖
      let { action } = await inquirer.prompt([
        {
          name: 'action',
          type: 'list',
          message: 'Target directory already exists Pick an action:',
          choices: [
            {
              name: 'Overwrite',
              value: 'overwrite'
            },{
              name: 'Cancel',
              value: false
            }
          ]
        }
      ])

      if (!action) {
        return;
      } else if (action === 'overwrite') {
        await fs.remove(targetAir)
      }
    }
  }

创建项目，请求模板，再选择（axios、inquirer、ora、chalk工具）

const repoList = await requestData(getRepoList, 'waiting fetch template');
if (!repoList) return;
// 过滤我们需要的模板名称
const repos = repoList.map(item => item.name);

//用户选择自己新下载的模板名称
const { repo } = await inquirer.prompt({
  name: 'repo',
  type: 'list',
  choices: repos,
  message: 'Please choose a template to create project'
})

请求模板下的某个tag，再选择（axios、inquirer、ora、chalk工具）

// 基于 repo 结果，远程拉取对应的 tag 列表
const tags = await requestData(getTagList, 'waiting fetch tag', repo);
if (!tags) return;

// 过滤我们需要的 tag 名称
const tagsList = tags.map(item => item.name);

// 用户选择自己需要下载的 tag
const { tag } = await inquirer.prompt({
  name: 'tag',
  type: 'list',
  choices: tagsList,
  message: 'Place choose a tag to create project'
})

选完tag，再下载公司的项目框架代码（download-git-repo、ora、chalk工具）

downloadGitRepo(`myusername/${repo}${tag?'#'+tag:''}`;)

可以加一些提示，比如成功创建、怎么执行项目等

涉及到三处下载：

模板列表 : axios 调用接口
tag列表 : axios 调用接口
公司定制的项目代码: download-git-repo 调用下载

上传到外网npm

在 git 上建好仓库
完善 package.json 中的配置，注意修改版本号，不然下一步发布不能成功
npm publish发布

版本升级规则以及更新策略

版本的格式

major.minor.patch

主版本号.次版本号.修补版本号

版本匹配规则

version：必须匹配某个版本

如：1.1.2，表示必须依赖1.1.2版

>version：必须大于某个版本

如：>1.1.2，表示必须大于1.1.2版

>=version：可大于或等于某个版本

如：>=1.1.2，表示可以等于1.1.2，也可以大于1.1.2版本

<version：必须小于某个版本

如：<1.1.2，表示必须小于1.1.2版本

<=version：可以小于或等于某个版本

如：<=1.1.2，表示可以等于1.1.2，也可以小于1.1.2版本

~version：大概匹配某个版本

如果minor版本号指定了，那么minor版本号不变，而patch版本号任意

如果minor和patch版本号未指定，那么minor和patch版本号任意

如：~1.1.2，表示>=1.1.2 <1.2.0，可以是1.1.2，1.1.3，1.1.4，.....，1.1.n

如：~1.1，表示>=1.1.0 <1.2.0，可以是同上

如：~1，表示>=1.0.0 <2.0.0，可以是1.0.0，1.0.1，1.0.2，.....，1.0.n，1.1.n，1.2.n，.....，1.n.n

^version：兼容某个版本

版本号中最左边的非0数字的右侧可以任意

如果缺少某个版本号，则这个版本号的位置可以任意

如：^1.1.2 ，表示>=1.1.2 <2.0.0，可以是1.1.2，1.1.3，.....，1.1.n，1.2.n，.....，1.n.n

如：^0.2.3 ，表示>=0.2.3 <0.3.0，可以是0.2.3，0.2.4，.....，0.2.n

如：^0.0，表示 >=0.0.0 <0.1.0，可以是0.0.0，0.0.1，.....，0.0.n

x标识符：x的位置表示任意版本

如：1.2.x，表示可以1.2.0，1.2.1，.....，1.2.n

标识符：任意版本，""也表示任意版本

如：*，表示>=0.0.0的任意版本

version1 - version2：大于等于version1，小于等于version2

如：1.1.2 - 1.3.1，表示包括1.1.2和1.3.1以及他们件的任意版本

range1 || range2：满足range1或者满足range2，可以多个范围

如：<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0，表示满足这3个范围的版本都可以

juejin.cn/post/696611…

juejin.cn/post/684490…