[email protected]

「 Vue 驱动的静态网站生成器 」⏰ 2018 7.16

github source

中文 | english

欢迎 Issue 和 Pull ❤️, 最好 Pull 👏

---

生活

help me live , live need money 💰

---

• 简单使用
• package.json
• bin/vuepress.js
  • 命令行通用第一行
  • 检查版本
  • 命令行分流
    • 1. vuepress dev
    • 2. vuepress build
    • 3. vuepress eject
    • 其他命令勘误 和 命令错误的输出
    • 包裹命令并且运行
• vurepss cli

---

简单使用

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

可以看出,用户的使用 主要在 命令行-CLI 上

package.json

  "main": "lib/index.js",
  "bin": {
    "vuepress": "bin/vuepress.js"
  },
  "scripts": {
    "dev": "node bin/vuepress dev docs",
    "build": "node bin/vuepress build docs",
    "lint": "eslint --fix --ext .js,.vue bin/ lib/ test/",
    "prepublishOnly": "conventional-changelog -p angular -r 2 -i CHANGELOG.md -s",
    "release": "/bin/bash scripts/release.sh",
    "test": "node test/prepare.js && jest --config test/jest.config.js"
  },

我们从命令行入口, bin/vuepress.js 开始

也许你可以先看看, vuepress 已经或要去做的事情

bin/vuepress.js

命令行通用第一行

#!/usr/bin/env node

检查版本

const chalk = require('chalk') // 颜色库
const semver = require('semver')
const requiredVersion = require('../package.json').engines.node

if (!semver.satisfies(process.version, requiredVersion)) {
  console.log(chalk.red(
    `\n[vuepress] minimum Node version not met:` +
    `\nYou are using Node ${process.version}, but VuePress ` +
    `requires Node ${requiredVersion}.\nPlease upgrade your Node version.\n`
  ))
  process.exit(1)
}

chalk 作为node的颜色库是众所周知, 但是当你仅仅需要 不大不小的颜色输出时 chalk 就显得过大了

chalk 大小

也许我们可以使用Turbocolor 小点的库

Turbocolor 大小

命令行分流

下面可以说是 vuejs 作者 编写命令行的 通用形式了

用vue-cli和本项目做对比,除了命令选项不同, 关于 其他命令勘误 与 命令错误输出的处理大致相同

const path = require('path')
const { dev, build, eject } = require('../lib') // 3大命令

const program = require('commander')

program
  .version(require('../package.json').version)
  .usage('<command> [options]')

1. vuepress dev

program
  .command('dev [targetDir]')
  .description('start development server')// 启动 开发服务器
  .option('-p, --port <port>', 'use specified port (default: 8080)')
  .option('-h, --host <host>', 'use specified host (default: 0.0.0.0)')
  .action((dir = '.', { host, port }) => {
    wrapCommand(dev)(path.resolve(dir), { host, port }) // 用 包裹函数 运行 命令选项
  })

• vurepss dev Explain

2. vuepress build

program
  .command('build [targetDir]')
  .description('build dir as static site')
  .option('-d, --dest <outDir>', 'specify build output dir (default: .vuepress/dist)') // 构建版本 输出目录
  .option('--debug', 'build in development mode for debugging')
  .action((dir = '.', { debug, dest }) => {
    const outDir = dest ? path.resolve(dest) : null
    wrapCommand(build)(path.resolve(dir), { debug, outDir }) // 用 包裹函数 运行 命令选项
  })

• vurepss build Explain

3. vuepress eject

program
  .command('eject [targetDir]')
  .description('copy the default theme into .vuepress/theme for customization.') 
  //复制 默认主题到 .vuepress/theme , 提供用户自定义主题
  .action((dir = '.') => {
    wrapCommand(eject)(path.resolve(dir)) // 用 包裹函数 运行 命令选项
  })

• vurepss eject Explain

其他命令勘误 和 命令错误的输出

// output help information on unknown commands
program
  .arguments('<command>')
  .action((cmd) => {
    program.outputHelp()
    console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))
    console.log()
  })

// add some useful info on help
program.on('--help', () => {
  console.log()
  console.log(`  Run ${chalk.cyan(`vuepress <command> --help`)} for detailed usage of given command.`)
  console.log()
})

program.commands.forEach(c => c.on('--help', () => console.log()))

// enhance common error messages
const enhanceErrorMessages = (methodName, log) => {
  program.Command.prototype[methodName] = function (...args) {
    if (methodName === 'unknownOption' && this._allowUnknownOption) {
      return
    }
    this.outputHelp()
    console.log(`  ` + chalk.red(log(...args)))
    console.log()
    process.exit(1)
  }
}

enhanceErrorMessages('missingArgument', argName => {
  return `Missing required argument ${chalk.yellow(`<${argName}>`)}.`
})

enhanceErrorMessages('unknownOption', optionName => {
  return `Unknown option ${chalk.yellow(optionName)}.`
})

enhanceErrorMessages('optionMissingArgument', (option, flag) => {
  return `Missing required argument for option ${chalk.yellow(option.flags)}` + (
    flag ? `, got ${chalk.yellow(flag)}` : ``
  )
})

program.parse(process.argv)

if (!process.argv.slice(2).length) {
  program.outputHelp()
}

包裹命令并且运行

function wrapCommand (fn) {
  return (...args) => {
    return fn(...args).catch(err => { // 真实运行 不过加了 catch 错误❌
      console.error(chalk.red(err.stack)) // 红色错误
      process.exitCode = 1
    })
  }
}

比如: vuepress dev .

wrapCommand(dev)(path.resolve(dir), { host, port })
// 第一括号 => 命令
// 第二括号 => 命令选项

// ===> 真实运行
return dev(".",{})

vurepss cli

• 1. vurepss dev Explain
• 2. vurepss build Explain
• 3. vurepss eject Explain