头图

基于区块开发(二):命令行工具

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

上一篇文章中,我简单的介绍了基于区块开发的总体思路和配套工具。接下来我会用 2 篇文章来分别介绍命令行工具VSCode插件的具体实现细节。

本系列总共 3 篇文章,以下是传送门:
基于区块开发(一):概述
基于区块开发(二):命令行工具
基于区块开发(三):VSCode插件

二、基础功能

命令行工具的基础功能包含以下几点:

  • 列出可选的区块列表
  • 通过链接预览效果
  • 将选中的区块安装到项目中
列出可选的区块列表并预览

由于区块信息是会动态变化的,所以区块列表必须通过接口获取。数据源方面一切从简,只是在ngnix后面挂了一个json文件,区块信息有什么变化就直接修改文件。

获取到区块信息后,就要考虑如何在命令行展现了。由于操作过程中涉及到一系列交互,一番调研后决定使用 Inquirer.js。单单有列表还不够,用户还需要去预览区块的效果,这里用到了 terminal-link 这个工具。
为了使展现效果更生动,使用 chalk 来添加字体颜色,

最终的展现效果如下:
image.png

关键代码如下:

const blockArray = blocks.map((block) => {
  const { name, value, preview } = block;
  const link = terminalLink("预览", preview);
  return {
    name: `📦  ${chalk.cyan(name)}  ${link}`,
    value: value,
  };
});

const choice = await inquirer.prompt([
  {
    type: "list",
    name: "block",
    message: `⛰  请选择区块(共 ${blockArray.length} 个 )`,
    choices: blockArray,
    pageSize: 10,
  },
  {
    type: "confirm",
    name: "cwd",
    message: `在当前目录安装区块吗?[${cwd}]`,
    default: "y",
  },
]);

// 选中的区块和安装路径
const { block, cwd: cur } = choice;
将选中的区块安装到项目中

获得用户选择的区块和区块的安装路径后,下一步就是获取区块的源码,并添加到项目中。所有区块的源码都集中存放在 git 仓库,只需要把仓库克隆下来,然后把文件夹拷贝到目标路径就可以了。过程中使用了 ora 来显示 loading 状态,rimraf 来删除目录。

// child_process模块
const exec = cp.exec;
const spinner = ora();

// 目标目录
const dir = path.resolve(".")
// 存放区块源码仓库的临时目录
const tmpdir = path.resolve(dir, ".block");

spinner.start(`📥  获取区块`);
exec(
  `git clone --depth=1 http://git.xxx.com/xxx/block.git ${tmpdir}`
);
spinner.succeed();

spinner.start(`💻  拷贝区块`);
// 这里都block变量是用户选择都区块名称
const sourceDir = path.resolve(tmpdir, `src/block/${block}`);
exec(`cp -r ${sourceDir}/. ${dir}/${block}`);
spinner.succeed();

spinner.start(`🗑️   清理源区块文件`);
rimraf.sync(tmpdir);
spinner.succeed();

spinner.start(`👌  区块安装完成`);
spinner.succeed();

到此为止区块就能成功的安装到项目中去了。
image.png

三、进阶功能

区块大体上分为3类:

  • 单页面
  • 页面+弹窗
  • 多页面

image.png

其中多页面区块会涉及到路由定义,为了更好的用户体验,会根据团队内约定的代码组织方式修改现有的文件。比如在区块安装前是这个样子:
image.png

区块安装后,不需要改任何代码,会自动添加对应的菜单项和路由:
image.png

再来看看代码的修改记录:
image.png

要实现这个功能,就要用到 AST 了。AST 的使用方法可以看我之前写的 AST实战

对应的,在安装区块的过程中,要加上处理修改现有文件的代码。

const containRoute = fs.existsSync(`${sourceDir}/routes`);

// 如果存在 routes 目录,则为多页面区块,需要处理路由逻辑
if (containRoute) {
  const re = new RegExp("^(.*/src).*", "gi");
  const result = re.exec(dir);
  let destDir;

  if (!result || !result[1]) {
    // 操作目录不包含 src 目录
    const inProjectRoot = fs.existsSync(`${cwd}/src`);

    if (!inProjectRoot) {
      throw new Error(
        "找不到 src 目录。区块包含路由配置,请在项目内运行此命令。"
      );
    }
    destDir = `${cwd}/src`;
  } else {
    destDir = result[1];
  }

  // 拷贝新的文件
  await runCmd(`cp -r ${sourceDir}/modules ${destDir}/`);
  await runCmd(`cp -r ${sourceDir}/routes ${destDir}/`);

  const files = fs.readdirSync(`${sourceDir}/routes/route`);
  if (!files || files.length === 0) {
    throw new Error("区块不包含路由文件");
  }
  // 获取路由变量名【AST】
  const routeName = getNamedExport(`${sourceDir}/routes/route/${files[0]}`);

  const i = files[0].indexOf(".tsx");
  const routeFileName = files[0].substring(0, i);
  // 插入 import 和 export(routes/index)【AST】
  insertImportAndExport(
    `${destDir}/routes/index.tsx`,
    routeName,
    routeFileName
  );
  // 获取 route-path 一级路由名【AST】
  const moduleName = getModuleName(`${destDir}/constants/route-path.ts`);
  if (!moduleName) {
    console.error(
      "❗️ " +
        chalk.red(
          `没有找到文件${destDir}/constants/route-path.ts, 需要手动将新增路由添加到app.ts`
        )
    );
  } else {
    // 更改 app.ts【AST】
    updateEntry(`${destDir}/app.ts`, moduleName, routeFileName, routeName);

    const selectedItem = blocks.find((item) => item.value === block);
    // 插入新菜单【AST】
    updateMenu(
      `${destDir}/configs/menu.js`,
      moduleName,
      routeFileName,
      selectedItem.name
    );
  }
}

注释中有【AST】标识的就涉及到抽象语法树的运用,下面是其中一个例子:

// 插入 import 和 export(routes/index)
function insertImportAndExport(indexRoutePath, routeName, routeFileName) {
  let importInserted = false;

  const result = fs.existsSync(indexRoutePath);
  if (!result) {
    throw new Error(`没有找到文件:${indexRoutePath}`);
  }

  const content = fs.readFileSync(indexRoutePath, "utf8");

  const ast = parser.parse(content, {
    sourceType: "module",
    plugins: ["jsx", "typescript"],
  });

  traverse(ast, {
    ImportDeclaration(astPath) {
      // 插入import(routes/index)
      if (!importInserted) {
        const id = t.identifier(routeName);
        const sp = t.importSpecifier(id, id);
        const literal = t.stringLiteral(`./route/${routeFileName}`);
        const declare = t.importDeclaration([sp], literal);
        astPath.insertBefore(declare);
        importInserted = true;
      }
    },
    ExportDefaultDeclaration(astPath) {
      // 导出路由(routes/index)
      const properties = astPath.node.declaration.properties;
      const id = t.identifier(routeName);
      const property = t.objectProperty(id, id, false, true);
      properties.push(property);
    },
  });

  const output = generate(ast, { jsescOption: { minimal: true } });
  fs.writeFileSync(indexRoutePath, output.code);
}

使用 AST 修改文件并不难,就是有点繁琐,对文件的约定内容也有要求,在此就不展开了。

四、总结

本文介绍了服务于区块开发的命令行工具的实现细节,分享实现思路和当中用到的一些工具库。在下一篇文章中,我将会介绍配套VSCode插件的实现细节。


睿Talk
记录个人和团队技术成长的点点滴滴
5.5k 声望
422 粉丝
0 条评论
推荐阅读
Web前端主题切换的几种方案
这种方案利用了css多层样式精确匹配的特点,通过样式覆盖的方式实现主题的切换。首先需要在应用的根元素中设一个 class,切换主题时给 class 赋上对应的值,下面以theme1/theme2为例。

Dickens8阅读 8.3k

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
5.5k 声望
422 粉丝
宣传栏