搭建脚手架 && 发布 Npm 仓库

工作以来，积累了几套项目模板，包括 PC 、H5 、Electron 、小程序等，平时可用于快速创建 项目模板。
提升开发效率，也是前端工程化的所需要的。

那么这次，封装的 脚手架（ JZ-cli ），采用 命令行交互式 询问安装，方便快速开发新项目。
主技术栈为 Node Npm。

话不多说，直接开搞：

脚手架的原理：

脚手架在命令行交互选择，选中所需 web 模板时，去下载远程 git 仓库的模板文件。下载完，拷贝目录到项目根目录。删除多出来的目录，并复制工具库。按照在命令行传入的配置，渲染最新的 package.json.

仓库托管：

因为 脚手架还需要单独发布到 npm ，包的体积大小不适合太大。所以分开 脚手架 和 模板 的目录，我这里都选择了 github 去托管。（ 也可以用 gitlab ）

初始化 package.json 与 bin 命令

• npm init -y ( 初始化 package.json )

• package.json 里 新建 bin 字段:
  bin 是 会链接到全局 path。把 bin 中的命令，在命令行可以执行，并直接运行全局的 bin 指向路径的文件。

  {
      "name": "jz-temp-cli",
      "version": "0.0.1",
      "description": "一款以node技术为主，包括PC、H5、小程序、Electron的脚手架",
      "bin": {
          "JZ-temp": "bin/index.js",
          "JZ-cli": "bin/index.js",
          "JZ": "bin/index.js"
      },
  }

  参考链接：npm docs :bin

• 主文件：bin / index.js
  index.js 里，首行： #!/usr/bin/env node
  因为我们需要用 node 去执行相关命令，所以 需要这句话 #!/usr/bin/env node ，使用 node 进行脚本的解释程序，那下面的就可以使用 node 的语法了。

• 调试前，需要 npm i . -g ，将本地包安装到全局。然后 npm link，建立 本地包 和 全局包的 同步关联。
  接下来可以愉快的调试了～

几个关键库：

• commander ： 终端交互库

  const { program } = require('commander')
  program
  .version(packageJson.version) // version 赋予版本号
  .command('create [project]') // command：指令名字
  .description('初始化项目模板') // 对应 command指令的 描述
  .action(async (projectName) => { // action 对应 命令指定处理函数
      require('../lib/create')(projectName)
  })

  

• inquirer : 实现交互式命令行

• chalk : 给命令行设置颜色

• fs-extra : 基于 fs 的额外补充版, 原型是 fs

• log-symbols : 各种日志级别的彩色图标

• ora : 终端 loading

• mvdir : 迁移文件目录

• del : 删除 文件 和 目录 ，支持 promise 调用

交互效果如图：

具体脚手架代码：

• 项目链接：github temp-cli
• 因为文章篇幅，就不展开讲了。代码量不算多，可以去看下～

发布 npm 需要做的准备：

• 登录 npm（ https://www.npmjs.com/ ） ，注册账号 (存好账号密码)
• 切换 npm 源，为默认的 切换为默认源
  命令行输入：npm config set registry https://registry.npmjs.org
• 修改 package.json

author ：名字 (github link)
“author”: “jonnzer janebenjohn@outlook.com (http://github.com/jonnzer)",

• name ：需要遵循规范：唯一，由小写英文字母、数字和下划线组成，不能包含空格

npm 发布

在命令行，按顺序输入以下命令：

• npm login: 登录 npm ，需要用到刚刚注册的用户名密码
• npm publish
• 去 npm 个人 packages 页，看下有没有你最新的发布包。
• 恭喜您完成本教程啦～～～

参考链接：
npm docs :bin
github command API
yuque deploy npm package