交互式创建自定义vue模板

作者: AAA前端 | 来源:发表于2021-04-28 21:01 被阅读0次

vue脚手架能生成vue的模板，把所有的都封装好了。但是比如我们是一个专题项目，对于公司来说肯定有些自己的配置，每次用脚手架生成后，还要修改，那么我们能不能自己生成一个类似于脚手架，每次就生成封装好的模板呢。

在之前，先介绍会用的的储备知识

1. ora进度转轮

用于node的控制台进度美化
直接看栗子吧

const ora = require('ora');
const spinner = ora('进入loading状态...')
spinner.start()
setTimeout(() => {
  // spinner.stop()
  // spinner.succeed()
  // spinner.fail()
  spinner.fail('失败了')
}, 2000)

image.png

当我们创建模板过程中，更好的用户体验，显示loading状态， stop直接结束。成功和失败还可以传入不同的文字。

2. chalk 控制台以彩色显示提示信息

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'))
console.log(chalk.blue('Hello') + 'World' + chalk.red('!')); 
console.log(chalk.blue.bgRed.bold('Hello world!'));
console.log(chalk.green('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
console.log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

image.png

3.log-symbols - 为各种日志级别提供着色的符号(控制台左边的 ❌，✔️，⚠️，！等)

const symbols = require('log-symbols');
const chalk = require('chalk');
console.log(symbols.error, chalk.red('错误'));
console.log(symbols.warning, chalk.yellow('警告'));
console.log(symbols.info, chalk.blue('提示'));
console.log(symbols.success, chalk.green('成功'));

image.png

4.path 路径

项目中用到的

path.sep

提供平台特定的路径片段分隔符：

Windows 上是 \。
POSIX 上是 /。

console.log('foo/bar/baz'.split(path.sep)); //  [ 'foo', 'bar', 'baz' ]

path.resolve([...paths])

path.resolve() 方法会将路径或路径片段的序列解析为绝对路径

path.resolve('/目录1/目录2', './目录3');
// 返回: '/目录1/目录2/目录3'

path.resolve('/目录1/目录2', '/目录3/目录4/');
// 返回: '/目录3/目录4'

path.join([...paths])

path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径。

path.join('/目录1', '目录2', '目录3/目录4', '目录5', '..');
// 返回: '/目录1/目录2/目录3/目录4'

path.resolve('/目录1/目录2', '/目录3/目录4/');
// 返回: '/目录1/目录2/目录3/目录4'

path.normalize(path)

path.normalize() 方法规范化给定的 path，解析 '..' 和 '.' 片段。

当找到多个连续的路径段分隔字符时（例如 POSIX 上的 /、Windows 上的 \ 或 /），则它们将被替换为单个平台特定的路径段分隔符（POSIX 上的 /、Windows 上的 \）。尾部的分隔符会保留。

如果 path 是零长度的字符串，则返回 '.'，表示当前工作目录。

console.log(path.normalize('')); // .
console.log(path.normalize('/a//b////c///////d////')); //  /a/b/c/d/
console.log(path.normalize('/a/b/c/../../d')); //  /a/d

image.png

5.fs-extra

fs-extra -- 文件操作相关工具库
fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API

const fs = require('fs-extra');

fs.copy(src, dest, [option],callback)
复制文件或目录

src <String>请注意，如果src是目录，它将复制此目录中的所有内容，而不是整个目录本身（请参阅问题＃537）。
dest <String>请注意，如果src是文件，dest则不能是目录（请参阅问题＃323）。
options <Object>
- overwrite <boolean>：覆盖现有文件或目录，默认为true。请注意，如果将其设置为false并且目标存在，则复制操作将以静默方式失败。使用该errorOnExist选项可以更改此行为。
- errorOnExist <boolean>：当overwriteisfalse并且目的地存在时，引发错误。默认值为false。
- dereference <boolean>：取消引用符号链接，默认为false。
- preserveTimestamps <boolean>：为true时，将设置对原始源文件的修改和访问时间。如果为false，则时间戳记行为取决于OS。默认值为false。
- filter <Function>：用于过滤复制的文件/目录的功能。返回true以复制该项目，false忽略它。

emptyDir(dir[, callback])

确保目录为空。如果目录不为空，则删除目录内容。如果该目录不存在，则会创建该目录。目录本身不会被删除。

ensureFile(file[, callback])

确保文件存在。如果请求创建的文件位于不存在的目录中，则会创建这些目录

ensureDir（dir [，options] [，callback]）

确保目录存在。如果目录结构不存在，则会创建它。

pathExistsSync
别名fs.existsSync()，为与保持一致而创建pathExists()。

如果路径存在，则返回 true，否则返回 false。

readJsonSync(file[, options])

读取JSON文件，然后将其解析为一个对象。

const fs = require('fs-extra')

const packageObj = fs.readJsonSync('./package.json')
console.log(packageObj.version) // => 2.0.0

6.inquirer NodeJs交互式命令行工具Inquirer.js

它是非常容易去处理以下几种事情的：

提供错误回调
询问操作者问题
获取并解析用户输入
检测用户回答是否合法
管理多层级的提示

inquirer.prompt([ { 
  type: 'confirm', 
  name: 'test', 
  message: 'Are you handsome?', 
  default: true 
}]).then((answers) => { console.log('结果为:'); console.log(answers)})

image.png

问题的标题和默认结果值都是可以预设的。而在回答完成后会返回一个Promise对象，在其then方法中可以获取到用户输入的所有回答。其中传递给prompt方法的参数为一个question问题数组，数组中的每个元素都是一个问题对象。其包含的属性共有以下几种：

  type: String, // 表示提问的类型，下文会单独解释 name: String, // 在最后获取到的answers回答对象中，作为当前这个问题的键
  message: String|Function, // 打印出来的问题标题，如果为函数的话 
  default: String|Number|Array|Function, // 用户不输入回答时，问题的默认值。或者使用函数来return一个默认值。假如为函数时，函数第一个参数为当前问题的输入答案。 
  choices: Array|Function, // 给出一个选择的列表，假如是一个函数的话，第一个参数为当前问题的输入答案。为数组时，数组的每个元素可以为基本类型中的值。 
  validate: Function, // 接受用户输入，并且当值合法时，函数返回true。当函数返回false时，一个默认的错误信息会被提供给用户。 
  filter: Function, // 接受用户输入并且将值转化后返回填充入最后的answers对象内。 
  when: Function|Boolean, // 接受当前用户输入的answers对象，并且通过返回true或者false来决定是否当前的问题应该去问。也可以是简单类型的值。 
  pageSize: Number, // 改变渲染list,rawlist,expand或者checkbox时的行数的长度。}

Prompt types —— 问题类型

List
{type: 'list'}
问题对象中必须有type,name,message,choices等属性，同时，default选项必须为默认值在choices数组中的位置索引(Boolean)

inquirer.prompt([ { 
  type: 'list', 
  name: 'test', 
  choices: ['a','b','c'],
  message: '请选择?', 
  default: 1 
}]).then((answers) => { console.log(answers)})

image.png

加上pageSize

inquirer.prompt([ { 
  type: 'list', 
  name: 'test', 
  choices: ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa','b','c'],
  message: '请选择?', 
  default: 1 ,
  pageSize: 2
}]).then((answers) => { console.log(answers)})

image.png

此时就滞后两个选择了

Raw list
{type: 'rawlist'}
与List类型类似，不同在于，list打印出来为无序列表，而rawlist打印为有序列表

inquirer.prompt([ { 
  type: 'rawlist', 
  name: 'test', 
  choices: ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa','b','c'],
  message: '请选择?', 
  default: 1 ,
}]).then((answers) => { console.log(answers)})

image.png

Expand
{type: 'expand'}
同样是生成列表，但是在choices属性中需要增加一个属性：key，这个属性用于快速选择问题的答案。类似于alias或者shorthand的东西。同时这个属性值必须为一个小写字母

inquirer.prompt([ { 
  type: 'expand', 
  name: 'test', 
  choices: [
    {
      key: 'y',
      name: 'Overwrite',
      value: 'overwrite',
    },
    {
      key: 'a',
      name: 'Overwrite this one and all next',
      value: 'overwrite_all',
    },
    {
      key: 'd',
      name: 'Show diff',
      value: 'diff',
    },
    {
      key: 'x',
      name: 'Abort',
      value: 'abort',
    },
  ],
  message: '请选择?', 
}]).then((answers) => { console.log(answers)})

image.png

直接输入key 值就可以选择了

Checkbox
{type: 'checkbox'}
其余诸项与list类似，主要区别在于，是以一个checkbox的形式进行选择。同时在choices数组中，带有checked: true属性的选项为默认值。

inquirer.prompt([ { 
  type: 'checkbox', 
  name: 'test', 
  choices:['a','b','c','d'],
  message: '请选择?', 
  default: ['b','d'] ,
}]).then((answers) => { console.log(answers)})

image.png

Confirm
{type: 'confirm'}
提问，回答为Y/N。若有default属性，则属性值应为Boolean类型

inquirer.prompt([ { 
  type: 'confirm', 
  name: 'test', 
  message: '需要默认选择吗？', 
  default: false,
}]).then((answers) => { console.log(answers)})

image.png

默认是大写字母

Input
{type: 'input'}
获取用户输入字符串

inquirer.prompt([ { 
  type: 'input', 
  name: 'test', 
  message: '输入手机号', 
  default: '110120',
}]).then((answers) => { console.log(answers)})

image.png

Password
{type: 'password'}与input类型类似，只是用户输入在命令行中呈现为XXXX

inquirer.prompt([ { 
  type: 'password', 
  name: 'test', 
  message: '输入密码', 
  default: '110120',
}]).then((answers) => { console.log(answers)})

image.png

Editor
{type: 'editor'}
终端打开用户默认编辑器，如vim，notepad。并将用户输入的文本传回

inquirer.prompt([ { 
  type: 'editor', 
  name: 'test', 
  message: '输入', 
}]).then((answers) => { console.log(answers)})

image.png

enter键进入编辑页面

image.png

7.handlebars

Handlebars 是一种简单的模板语言
类似于 vue 。这里就是用来解析默认 package.json中的值比如

{
  "name": "{{name}}",
  "year": "{{year}}",
  "outputFolder": "{{outputFolder}}",
  "outputFolderNeibu": "neibu-dist",
  "version": "1.0.0",
  "ztType": "{{ztType}}",
  "author": "{{author}}",
  "platform": "{{platform}}",
  "description": "",
  "main": "index.js",
....

创建模板是替换为上面输入的值，生成新的 package.json文件

8.process.platform 属性会返回标识操作系统平台（Node.js 进程运行其上的）的字符串。

当前可能的值有：

'aix'
'darwin'
'freebsd'
'linux'
'openbsd'
'sunos'
'win32'
console.log(此平台是 ${process.platform});

9.child_process 子进程

child_process.spawn(command[, args][, options])

command <string> 要运行的命令。
args <string[]> 字符串参数的列表。
options <Object>
- cwd <string> 子进程的当前工作目录。
- env <Object> 环境变量的键值对。 默认值: process.env。
- argv0 <string> 显式地设置发送给子进程的 argv[0] 的值。如果没有指定，则会被设置为 command 的值。
- stdio <Array> | <string> 子进程的 stdio 配置，参见 options.stdio。
- detached <boolean> 使子进程独立于其父进程运行。具体行为取决于平台，参见 options.detached。
- uid <number> 设置进程的用户标识，参见 setuid(2)。
- gid <number> 设置进程的群组标识，参见 setgid(2)。
- serialization <string> 指定用于在进程之间发送消息的序列化类型。可能的值为 'json' 和 'advanced'。详见高级序列化。 默认值: 'json'。
- shell <boolean> | <string> 如果为 true，则在 shell 中运行 command。在 Unix 上使用 '/bin/sh'，在 Windows 上使用 process.env.ComSpec。可以将不同的 shell 指定为字符串。参见 shell 的要求和默认的 Windows shell。 默认值: false（没有 shell）。
- windowsVerbatimArguments <boolean> 在 Windows 上不为参数加上引号或转义。在 Unix 上会被忽略。如果指定了 shell 并且是 CMD，则自动设为 true。 默认值: false。
- windowsHide <boolean> 隐藏子进程的控制台窗口（在 Windows 系统上通常会创建）。 默认值: false。
返回: <ChildProcess>

child_process.spawn() 方法使用给定的 command 衍生新的进程，并传入 args 中的命令行参数。如果省略 args，则其默认为空数组。

如果启用了 shell 选项，则不要将未经过处理的用户输入传给此函数。包含 shell 元字符的任何输入都可用于触发任意命令的执行。

栗子

const { spawn } = require('child_process');
const ls = spawn('node', ['-v']);

ls.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

ls.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});

ls.on('close', (code) => {
  console.log(`子进程退出，退出码 ${code}`); // code 为 0 成功
});

image.png

ok 下面看代码

create.js (#!/usr/bin/env node顶上要加上，这样发布到npm后才能按node执行)

#!/usr/bin/env node

const fs = require('fs-extra');
const inquirer = require('inquirer');
const handlebars = require('handlebars');
const ora = require('ora');
const chalk = require('chalk');
const symbols = require('log-symbols');
const { spawn } = require('child_process');
const path = require('path');

const now = new Date();

// 交互式获取用户 的需求
inquirer.prompt([
  {
    type: 'input',
    name: 'year',
    message: '请输入项目年份，比如2019(插件请输入"plugins")',
    default: now.getFullYear(),
  }, {
    type: 'input',
    name: 'name',
    message: '请输入项目名称，比如0702projectname(注意不要使用过长的文件名，CMS会报错)',
    default: `${String(now.getMonth() + 1).padStart(2, '00')}${now.getDate()}-projectName`,
  }, {
    type: 'list',
    name: 'platform',
    message: 'PC端项目还是wap端项目？',
    choices: ['pc', 'wap'],
    default: 0,
  }, {
    type: 'input',
    name: 'author',
    message: '请输入作者名称',
    default: 'author_name',
  }, {
    type: 'input',
    name: 'ztType',
    message: '请输入专题类型(kaoyan):',
    default: 'kaoyan',
  }, {
    type: 'confirm',
    name: 'autoInitialize',
    message: '是否自动安装依赖？',
  }, {
    type: 'list',
    name: 'packageManager',
    message: '使用哪种包管理工具？',
    choices: ['npm', 'yarn'],
    default: 0,
  },
]).then((answers) => {
  const { year, name } = answers;
  // 创建 专题  还是  插件
  const projectBasePath = year == 'plugins' ? 'project/plugins' : `project/zt/${year}/${name}`;
  
  answers.outputFolder = 'pro-dist';

  // 项目已存在则退出
  if (fs.existsSync(projectBasePath)) {
    return console.log(symbols.error, chalk.red('项目已存在'));
  }

  // 拷贝模板
  downloadTemplate(projectBasePath, answers);
  return true;
});

// 拷贝模板
function downloadTemplate (projectBasePath, answers) {
  let templatePath = path.join(__dirname, '../', 'template', 'base');
  // 把 基础模板 拷贝 到用户 输入后的新位置
  fs.copySync(templatePath, projectBasePath);

  // 处理wap的差异
  if (answers.platform === 'wap') {
    handlePlatform(projectBasePath);
  }

  // 处理package.json文件
  updatePackageJson(answers, projectBasePath);

  console.log(symbols.success, chalk.green('项目初始化成功'));

  // 如果开始交互式 有选择 默认安装依赖，则安装依赖
  answers.autoInitialize && yarnInstall(projectBasePath, answers.packageManager);
}

// 处理pc 和 wap的差异
function handlePlatform (projectBasePath) {
  // html模板引用文件
  const indexHtmlFileName = `${projectBasePath}/src/index.ejs`;
  // 读取 页面内容  把 引入的 pc转换为 wap 的（wap会做rem处理）
  const htmlFile = fs.readFileSync(indexHtmlFileName)
    .toString()
    .replace('./ejstpls/public-pc.ejs', './ejstpls/public-wap.ejs');

  // 处理之后把 模板 页面替换
  fs.writeFileSync(indexHtmlFileName, htmlFile);
}

// 合并选项到package.json
function updatePackageJson (answers, projectBasePath) {
  const meta = { ...answers };
  console.log(symbols.success, chalk.green(`你的配置是：\n${JSON.stringify(meta)}`));

  // 获取创建后 新的package.json
  const fileName = `${projectBasePath}/package.json`;

  // 获取里面 的内容
  const content = fs.readFileSync(fileName).toString();

  // 用模板引擎 修改  {{}} 的内容
  const result = handlebars.compile(content)(meta);

  // 重新 package.json
  fs.writeFileSync(fileName, result);
}

// 安装依赖
function yarnInstall (dir, pm) {
  // 提示用户安装中
  const spinner = ora('正在安装依赖……').start();
  // pm 是用选择的 npm 或者yarn  开始安装package.json 中的依赖
  const sp = spawn(pm, ['install'], {
    cwd: path.resolve(process.cwd(), `./${dir}`), // process.cwd() 当前命令执行的目录
    shell: /^win/.test(process.platform),
  });

  // 这里仅仅是输出 查看，其实可以去掉
  sp.on('message', (msg) => {
    console.log(msg.toString());
  });
  sp.stdout.on('data', (data) => {
    console.log(data.toString());
  });

  sp.on('close', (code) => {
    // 安装依赖失败
    if (code !== 0) {
      spinner.fail();
      return console.log(chalk.red(`安装失败，退出码 ${code}`));
    }
    // 安装依赖成功
    spinner.succeed();
    console.log(chalk.green(`下载依赖成功~请执行cd ${dir}`));
    return true;
  });
}

结构

image.png

当然， template/base中就是你们公司需要定制化的一套模板了

** 补充 **
如果要要使用类似于 vue-cli的脚手架，用命令行就能安装的话，
新建一个bin目录，把create.js放进去。当然 create.js中有些路径的话要自己修改一下了。
需要去package.json中增加一个bin命令

    "bin": {
        "my-create": "./bin/create.js"
    },

然后本地测试的时候，要npm link 把my-create命令创建为全局命令，类似于cnpm ，yarn等等一样。此时命令行输入 my-create 其实就是进入bin目录运行 node create.js命令了。
如果没问题，就可以把自己的这个模板项目发布到npm上了。
以后自己下载到全局，运行 my-create就可以执行按照模板了。
比如：我安装好之后就是 npm i zxx-cli-test -g 安装好之后直接运行my-create 就可以安装我的模板了；

交互式创建自定义vue模板

vue脚手架能生成vue的模板，把所有的都封装好了。但是比如我们是一个专题项目，对于公司来说肯定有些自己的配置，每次用脚手架生成后，还要修改，那么我们能不能自己生成一个类似于脚手架，每次就生成封装好的模板呢。

1. ora进度转轮

2. chalk 控制台以彩色显示提示信息

3.log-symbols - 为各种日志级别提供着色的符号(控制台左边的 ❌，✔️，⚠️，！等)

4.path 路径

5.fs-extra

6.inquirer NodeJs交互式命令行工具Inquirer.js

7.handlebars

8.process.platform 属性会返回标识操作系统平台（Node.js 进程运行其上的）的字符串。

9.child_process 子进程

ok 下面看代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

交互式创建自定义vue模板

1. ora进度转轮

2. chalk 控制台 以 彩色显示 提示信息

3.log-symbols - 为各种日志级别提供着色的符号(控制台 左边的 ❌，✔️，⚠️，！等)

4.path 路径

5.fs-extra

6.inquirer NodeJs交互式命令行工具Inquirer.js

7.handlebars

8.process.platform 属性会返回标识操作系统平台（Node.js 进程运行其上的）的字符串。

9.child_process 子进程

ok 下面看代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2. chalk 控制台以彩色显示提示信息

3.log-symbols - 为各种日志级别提供着色的符号(控制台左边的 ❌，✔️，⚠️，！等)