简介

fim是为了提高开前端发效率及标准化前端基本操作的一个工具。

除去本身提供的基础能力外，还拥有插件机制，支持对工具能力的拓展，同时也避免了工具本身过于庞大臃肿的麻烦。

工具本身支持多样化的配置，可以根据需求定制不同的内容。

安装

sudo npm i -g @humbird/fim

命令

init

fim init \
--name=projectName

• name - 项目名称

create

fim create \
--name=index \
--type=page \
--framework=react \
--path=./src/view \
--morePorps=xxx

以下参数都是非必传参数。

在模板源入口文件和资源文件内可以访问到这些参数，如果需要更多自定义内容，可以传入更多的参数（--morePorps=xxx）。

• name - 页面/组件名称，不能以数字开头。
• type - 创建的类型。仅支持page和component。
• framework - 运行框架。不传时，提供 react vue dingApplet wechatApplet
• path - 创建的入口路径。不传时，默认在执行命令的目录作为入口路径。

publish

fim publish \
--username=root \
--host=111.111.111.11 \
--port=22 \
--localDir=./dist \
--remoteDir=/dist \
--password='xxxx' \ # 或 --privateKey="xxx" 使用私钥登录服务器
--exec="yarn build"

• username - 登录服务器用户名
• host - 服务器 IP 地址
• port - 服务器端口
• password - 服务器登录密码
• privateKey - 本地私钥。 如果存在，则使用私钥私钥登录，可不传入密码
• localDir - 需要上传的目录。默认为dist
• remoteDir - 服务器接收的目录
• exec - 发布前执行的命令。一般为构建的命令。process.env.NODE_ENV值为production时，默认执行yarn build:pro。否则执行yarn build:dev
• mode - 发布的模式。这个需要配合配置文件的publish配置。可以根据匹配到的不同mode执行发布任务。例如：
• backup - 备份上一次迭代文件
• backupTag - 指定备份名称。形如 0.0.1

module.exports = {
  publish: {
    // fim publish --mode=dev
    dev: {
      backup: true, // 开启备份
      exec: "yarn build:dev", // 执行的命令
      localDir: "./dist", // 需要上传的目录
      remoteDir: "xxx/dev", // 远程目录
      connect: {
        host: "xxx.xxx.xxx.xx", // 服务器 ip
        port: 22, // 端口号
        username: "root", // 登录用户名
        password: "xxx", // 登录密码
        privateKey: "xxx", // 如果不提供密码，也可以使用 ssh 的本地私钥登录（确保自己的秘钥上传到了服务器）
      },
    },
    // fim publish --mode=pro
    pro: {
      exec: "yarn build:pro", // 执行的命令
      localDir: "./dist", // 需要上传的目录
      remoteDir: "xxx/pro", // 远程目录
      connect: {
        host: "xxx.xxx.xxx.xx", // 服务器 ip
        port: 22, // 端口号
        username: "root", // 登录用户名
        password: "xxx", // 登录密码
        privateKey: "xxx", // 如果不提供密码，也可以使用 ssh 的本地私钥登录（确保自己的秘钥上传到了服务器）
      },
    },
  },
};

branch

fim branch

分支管理工具，提供交互式的 Git 分支操作功能。

功能特性：

• 删除多余分支 - 安全地删除不需要的本地分支，保护 master 和 test 分支
• 创建新分支 - 基于远程 master 分支创建新的功能分支或修复分支
• 合并 master 代码 - 将远程 master 分支的最新代码合并到当前分支
• 合并到 test 分支 - 将当前分支的代码合并到 test 分支并推送到远程

分支命名规范：

• 功能分支：feat/YYYYMMDD-功能名称
• 修复分支：fix/YYYYMMDD-修复内容

使用示例：

# 启动分支管理工具
fim branch

# 交互式选择操作：
# 1. 删除多余分支 - 逐个确认删除不需要的分支
# 2. 创建新分支 - 选择分支类型并输入名称
# 3. 合并 master 代码 - 自动拉取并合并最新代码
# 4. 合并到 test 分支 - 将当前分支合并到测试环境

rollback

fim rollback \
--mode=doc \ // 指定回滚发布的模式
--rollbackTag=0.0.1 // 指定要回滚的版本
--list // 选择要回滚的版本。如果存在 rollbackTag 则忽略 list

• rollbackTag - 指定要回滚的版本
• list - 选择要回滚的版本。如果存在 rollbackTag 则忽略 list

config

fim config -h

管理 fim 全局配置

配置

配置文件支持两种格式fim.config.json或fim.config.js

创建页面/组件（create）

创建页面或组件的入口路径。若不配置，则默认在执行命令的目录作为入口路径。

module.exports = {
  create: {
    page: {
      // 创建页面输出的目录
      path: "src/pages",
    },
    component: {
      // 创建组件输出的目录
      path: "src/components",
    },
  },
};

模板源（templateSource）

创建页面或者组件的模板源。默认值为direct:http:/x.xx.xxxx/great/xfw-front/fim-project-templates.git#master。项目的远程地址，协议为 http。

module.exports = {
  templateSource:
    "direct:http://x.xx.xxxx/great/xfw-front/fim-project-templates.git#master",
};

单个模板源目录结构

文件的内容均是ejs语法。

├── component
│   ├── index.js
│   ├── index.json
│   └── index.scss
├── page
│   ├── index.js
│   └── index.scss
└── template_creator.js // 模板入口文件

模板入口文件template_creator.js。入口文件会暴露出创建组件和页面所需要的文件。

module.exports = {
  pageFiles: ["./page/index.js", "./page/index.scss"],
  componentFiles: [
    "./component/index.js",
    "./component/index.scss",
    "./component/index.json",
  ],
  handler: {
    // 运行平台(framework)为 钉钉小程序 或 微信小程序
    // true 则创建返回 `./component/index.json` 文件
    // false 则不返回
    "./component/index.json": ({ framework }) => {
      ..
      return framework === "DingApplet" || framework === "WechatApplet";
    },
  },
};

• pageFiles - 创建page需要的文件
• componentFiles - 创建component需要的文件
• handler - 根据传入的不同参数，选择是否创建文件

多个模板源目录结构

如果模板源是一个模板的组合，根目录则可以存在多个目录。每个目录都会被当做一个模板源，每个模板源都需要一个入口文件 template_creator.js

├── xinyingxiao
│   ├── component
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.scss
│   ├── page
│   │   ├── index.js
│   │   └── index.scss
│   └── template_creator.js
└── xinzichan
    ├── component
    │   ├── index.js
    │   ├── index.json
    │   └── index.scss
    ├── page
    │   ├── index.js
    │   └── index.scss
    └── template_creator.js

发布（publish）

发布提供了多个模式 mode，可以根据需求定制发布执行的命令、目标文件、远程地址等。

module.exports = {
  publish: {
    dev: {
      exec: "yarn build:dev", // 执行的命令
      localDir: "./dist", // 需要上传的目录
      remoteDir: "xxx", // 远程目录
      connect: {
        host: "xxx.xxx.xxx.xx", // 服务器 ip
        port: 22, // 端口号
        username: "root", // 登录用户名
        password: "xxx", // 登录密码
        privateKey: "xxx", // 如果不提供密码，也可以使用 ssh 的本地私钥登录（确保自己的秘钥上传到了服务器）
      },
    },
  },
};

• exec - 执行的命令。process.env.NODE_ENV值为production时，默认执行yarn build:pro。否则执行yarn build:dev
• localDir - 默认值为dist