介绍

为方便公司各个产品h5活动页开发，减少直接复制粘贴代码而产生没有的代码和其它问题，开发此cli工具，目前功能较为简单，其它功能正在开发中，请根据自己需要，决定是否使用。

B612 CLI 是一个基于 vue cli进行快速开发的工具，提供：

  • 通过 @b612/cli 实现的交互式的项目脚手架。
  • 零配置原型开发。
  • 支持多模板项目生成(目前只有一个模板)

    安装

    Node 版本要求 B612 CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

  1. npm install -g @b612/cli
  2. # OR
  3. yarn global add @b612/cli

安装之后，你就可以在命令行中访问 b612 命令。你可以通过简单运行 b612，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：

  1. b612

image.png

基础

创建一个项目

运行以下命令来创建一个新项目：

  1. b612 init my-project default

my-project是我们要创建项目的名字，default是项目使用模板的名字，默认使用default模板
image.png
会依次提示输入以下信息
请输入项目名称，默认值 my-project
请输入项目简介，默认值 This is a vue activity project.
请输入作者名称，默认值 git设置的username
请输入作者邮箱，默认值 <username>@yiruikecorp.com
输入git仓库地址，默认值 http://10.35.33.29:9999/<username>/<projectName>.git,注意请修改成正确的git仓库地址，否则git push会报错
项目文件准备成功后，我们进入项目所在文件夹，并查看生成的文件

  1. cd my-project && ls

image.png
然后我们查看README.md文件，根据文档安装依赖，并运行项目
image.png
运行后的效果
image.png

开发

1.CLI工具开发

仓库：http://10.35.33.29:9999/dengjianjun/b612-cli.git
代码结构

  1. |-- b612-cli
  2.     |-- .editorconfig
  3.     |-- .eslintrc.js
  4.     |-- .gitignore
  5.     |-- README.md
  6.     |-- index.js //入口文件，主要逻辑
  7.     |-- package.json
  8.     |-- lib
  9.         |-- download.js
  10.         |-- file.js //下载模板
  11.         |-- templates.js //模板配置

如需要添加扩展功能，先clone项目，再修改代码，改完后push到git仓库，再发布到公司npm私服仓库http://10.35.46.142:4873

增加模板

目前CLI只有一个模板，可以根据业务需求，为每个产品添加一个模板

  1. // /lib/templates.js
  2. const templates = {
  3.   'default': {//模板名字
  4.     url: 'http://10.35.33.29:9999/dengjianjun/activityTemplate', //仓库地址
  5.     downloadUrl: 'direct:http://10.35.33.29:9999/dengjianjun/activityTemplate.git', //clone地址
  6.     description: '默认h5活动页模板' //模板说明
  7.   }
  8. }
  10. module.exports = templates

添加新模板，只需要在/lib/templates.js文件中templates对象上里添加属性即可，属性名是模板名字，此属性需要3个字段

  1. url:仓库地址
  2. downloadUrl:clone代码地址，可以是github.com,gitlab.com,bitbucket.org等网站地址，如果是其它网站地址需要在链接前加direct:
  3. description:模板说明，输入命令 b612 list会显示此模板说明

2.模板开发

default模板

仓库：http://10.35.33.29:9999/dengjianjun/activityTemplate.git
代码结构

  1. |-- activityTemplate
  2.     |-- .editorconfig //编辑器配置文件
  3.     |-- .env.beta //环境配置文件，如BASE_URL
  4.     |-- .env.development
  5.     |-- .env.production
  6.     |-- .env.staging
  7.     |-- .eslintignore
  8.     |-- .eslintrc.js
  9.     |-- .gitignore
  10.     |-- README.md
  11.     |-- babel.config.js
  12.     |-- package.json
  13.     |-- postcss.config.js
  14.     |-- vue.config.js //vue cli配置
  15.     |-- dist
  16.     |-- public
  17.     |   |-- index.html
  18.     |-- src
  19.         |-- App.vue
  20.         |-- main.js //js 入口文件
  21.         |-- assets
  22.         |   |-- back.png
  23.         |   |-- index.css
  24.         |   |-- zaizai_logo.png
  25.         |-- components //组件
  26.         |   |-- Confirm.vue
  27.         |   |-- Dialog.vue
  28.         |   |-- Loading.vue
  29.         |   |-- Toast.vue
  30.         |-- views //页面
  31.             |-- Home.vue

本模板基于vue cli,主要提供以下功能：

  1. 通用的项目配置
  2. 图片压缩
  3. px转rem
  4. 打包配置
  5. vConsole
  6. Confirm、Dialog、Loading、Toast 4个组件

无任何业务代码，适合所有h5活动，后续还会增加新的功能，也可以自己修改代码push到git仓库
建议package.json中scripts命令保持统一

  1. //package.json
  2. "scripts": {
  3.     "dev": "vue-cli-service serve", //本地开发，使用开发环境接口
  4.     "beta": "vue-cli-service serve --mode beta", //本地开发，使用beta环境接口
  5.     "stage": "vue-cli-service serve --mode staging", //本地开发，使用预发环境接口
  6.     "prod": "vue-cli-service serve --mode production", //本地开发，使用正式环境接口
  7.     "build:beta": "vue-cli-service build --mode beta", //beta环境构建
  8.     "build:stage": "vue-cli-service build --mode staging",//预发环境构建
  9.     "build:prod": "vue-cli-service build",//正式环境构建
  10.     "lint": "vue-cli-service lint"
  11.   },

注意这几个地方需要用到模板语法替换，不能写死

  1. //package.json
  2. "name": "{{name}}",
  3. "description": "{{description}}",
  4. "author": "{{author}} <{{mail}}>",
  5. "repository": {
  6.   "type": "git",
  7.   "url": "{{repository}}"
  8. },
  1. // README.md
  2. # {{name}}

这几个变量就是运行b612 init xxx xxx时自己输入的内容，对应脚手架项目的index.js文件中的answers变量

  1. // b612-cli/index.js
  3. const promptList = [
  4.     {
  5.       type: 'input',
  6.       name: 'name',
  7.       message: '请输入项目名称',
  8.       default: projectName
  9.     },
  10.     {
  11.       type: 'input',
  12.       name: 'description',
  13.       message: '请输入项目简介',
  14.       default: 'This is a vue activity project.'
  15.     },
  16.     {
  17.       type: 'input',
  18.       name: 'author',
  19.       message: '请输入作者名称',
  20.       default: author
  21.     },
  22.     {
  23.       type: 'input',
  24.       name: 'mail',
  25.       message: '请输入作者邮箱',
  26.       default: `${author}@yiruikecorp.com`
  27.     },
  28.     {
  29.       type: 'input',
  30.       name: 'repository',
  31.       message: '请输入git仓库地址',
  32.       default: repository
  33.     }
  34.   ]
  35. //命令行答询
  36.   const answers = await inquirer.prompt(promptList)
  37.   const files = ['package.json', 'README.md'];
  38.   files.forEach(file => {
  39.     //根据命令行答询结果修改对应文件
  40.     const filePath = `${projectName}/${file}`;
  41.     const packsgeContent = fs.readFileSync(filePath, 'utf8');
  42.     const packageResult = handlebars.compile(packsgeContent)(answers);
  43.     fs.writeFileSync(filePath, packageResult);
  44.   });

PS:

创建简单的npm脚手架