关于javascript:用-Node-搭建最小实现脚手架

前言

本文介绍应用 Node 做一个脚手架，便于疾速开发我的项目。咱们开发的是脚手架，而非我的项目，目前自己只有一个脚手架—— Koa 脚手架，后续写到 React、webpack 时，会搭建属于本人的一套 H5 端的开发模板。本文以实现最小脚手架为出发点开展写作，后续也会再次根底上添砖加瓦

引子

A：大 B 哥，Node 能做什么？

B：搭建 Web 服务噜

A：不仅如此，它还能操作系统

B：怎么说？

A：晓得 Webpack 吗？它就是用 Node 写的。还有像 create-react-app、vue-cli、@tarojs/cli 这些，都是用 Node 写的，这些 cli 被称为脚手架，你只有应用一些命令就能下载模板疾速开发

B：（各种艳羡、吹捧后），我也想做一套本人的脚手架

A：我教你啊

一个脚手架的思路

看 create-react-app、vue-cli、@tarojs/cli 的各自的仓库，咱们能得出一些共同点，例如多套模板、敌对的交互、柔美的 UI 等等。咱们这里以 taro 为例，先用用，看看，再仿着做一个

它是怎么做到抉择不同的模板，能生成不同的文件呢？明明只有一个根底模板啊，抉择 scss 就生成 scss 文件，抉择 TypeScript 生成 TS 文件，当初还看不懂源码，当前写完 webpack 再来看看，咱们这里只先做一个最简略的脚手架

创立工程

mkdir azhu-cli
cd azhu-cli
npm init -y

而后在 package.json 中写点我的项目信息

须要装置的 npm 包

咱们先列个表格，查看一下各个 npm 包是什么，有什么用，后续在写代码时一步步增加进去

创立一个命令

先创立 index.js，在代码中写入

#!/usr/bin/env node
console.log('hello world')

在终端中运行 node 程序，输出 node 命令

node index.js

能够正确输入 hello world，代码顶部的 #!/usr/bin/env node 是通知终端，这个文件要应用 node 去执行

个别 cli 都有一个特定的命令，例如 taro，git 等，咱们设置咱们的命令—— azhu。如何让终端辨认这个命令呢？很简略，在 package.json 文件中增加一个字段 bin，并且申明一个命令关键字和对应执行的文件：

# package.json
...
"bin": {"azhu": "index.js"}
...

而后咱们测试一番，在终端中输出 azhu，会提醒：

为什么会这样呢？通常咱们在应用 cli 工具时，都须要先装置它，比方 vue-cli，@tarojs/cli，应用前须要全局装置：

npm i vue-cli -g
npm i @tarojs/cli -g 

而咱们的 azhu-cli 并没有公布到 npm 上，当然也没有装置过，所以终端当初还不意识这个命令。通常咱们想本地测试一个 npm 包，能够应用 npm link 这个命令，本地装置这个包，咱们执行一下：

npm link

再执行 azhu 命令，就看到 hello world 了

注：npm unlink 卸载本地包

执行简单的命令

commander：解决命令行交互

• 自带了 -V，-h 交互
• 能够通过 program.command 增加交互
• program.parse 将命令参数传入 commander 管道中，个别放在最初执行

npm i commander --save

革新 index.js

#!/usr/bin/env node

const program = require('commander')
const package = require('./package.json')
program.version(package.version)
program.parse(process.argv)

运行 azhu -h

增加问答操作

inquirer 增加问答操作

npm i inquirer --save

语法很简略，间接看代码：

inquirer
  .prompt([{ type: 'input', message: '请输出项目名称', name: 'name'},
    {
      type: 'list',
      message: '请抉择我的项目模板',
      name: 'template',
      choices: ['koa-basic'],
    },
  ])
  .then((answers) => {console.log('answers', answers)
  })

每个选项中的 name 为答案输入的值

克隆模板

download-git-repo

• 下载近程模板

npm i download-git-repo --save

本来应用 shelljs，然而死活下载不下来，只能抉择另一个工具

当咱们下载写好我的项目名字，抉择好模板后，下一步就要从近程仓库上把模板下载过去

.then((answers) => {console.log('正在拷贝我的项目，请稍等')
      const remote = 'https://github.com:johanazhu/koa-basic#master'
      const tarName = answers.name
      download(remote, tarName, { clone: true}, function (err) {if (err) {console.log(err)
        } else {console.log('胜利')
        }
      })
    })

增加 UI 交互

有时候下载近程仓库时会花很多工夫，咱们必须为了体验，须要加一些 UI 成果优化体验

chalk & ora

npm i chalk ora --save

chalk 是给 console 加色彩

ora 是加 loading 成果的

...
.then((answers) => {console.log('正在拷贝我的项目，请稍等')
    const remote = 'https://github.com:johanazhu/koa-basic#master'
    const tarName = answers.name
    + const spinner = ora('download template......').start()
    download(remote, tarName, { clone: true}, function (err) {if (err) {+ console.log(chalk.red(err))
            spinner.fail()} else {+ console.log(chalk.green('胜利'))
            spinner.succeed()}
    })
})

成果如下：

公布 npm

先登录 npm，再公布

npm login...npm publish

额定知识点

包治理形式

monorepo

• 将多个我的项目代码存储在一个仓库力的软件开发策略
• 把所有的我的项目相干都放在一个仓库（比方 React，Babel，Umi，Taro）
• 集中管理

• 劣势

  • 对立工作流
  • 升高基建老本
  • 进步团队合作效率

• 劣势

  • 体积问题
  • 权限问题
  • 版本控制

multirepo

• 按模块放在为多个仓库（webpack、rollup）

• 劣势

  • 灵便
  • 平安

• 劣势

  • 代码复用
  • 版本治理
  • 开发调试
  • 搭建基础架构

大的我的项目能够应用 monorepo，独立性比拟强的能够采纳 multirepo

我集体更喜爱 multirepo 的哲学

有人回升到哲学层面，其实俺感觉不同的我的项目应采纳适合本人的治理形式，像 webpack、rollup 之类，我的项目独立想比拟强，就能够用应用 multirepo，而像 React，Umi，Taro 之类的框架，它首先要拆分性能点，其次每个子库之间须要与主库有所依赖，如果采纳 multirepo 形式，关联起来会很麻烦，采纳对立治理的形式能节俭很多工夫

常见问题

一：应用 shelljs 常有报错，临时解决不了，所以用 download-git-repo 这种形式

fatal: unable to access 'https://github.com/johanazhu/koa-basic/': OpenSSL SSL_read: Connection was reset, errno 10054

解决方案

关上 Git 命令页面，执行 git 命令脚本：批改设置，解除 ssl 验证

git config --global http.sslVerify "false"

注：git config –list 查看你的 config 信息

二：download-git-repo 报谬误

'git clone' failed with status 128

解决方案：https://github.com/wuqiong7/Note/issues/17

我将 remote 地址改成：https://github.com:johanazhu/koa-basic#master 就好了

Github 已公布：https://github.com/johanazhu/azhu-cli

参考资料

• 搭建一个企业级脚手架
• 从零开发一个 node 命令行工具