@ airtable/ blocks-cli (英语)

Airtable Blocks开发的命令行工具.

• @ airtable/ blocks-cli (英语)
• 安装
• 使用量
• 图标
• V2 中的新特性

安装

要安装或更新 block cli,运行:

npm install --global @airtable/blocks-cli

使用量

$ npm install -g @airtable/blocks-cli
$ block COMMAND
running command...
$ block (-v|--version|version)
@airtable/blocks-cli/3.0.3 darwin-arm64 node-v22.14.0
$ block --help [COMMAND]
USAGE
  $ block COMMAND
...

图标

• block add-remote BLOCKIDENTIFIER REMOTENAME
• block help [COMMAND]
• block init BLOCKIDENTIFIER BLOCKDIRPATH
• block list-remotes
• block release
• block remove-remote REMOTENAME
• block run
• block set-api-key [APIKEY]
• block submit

block add-remote BLOCKIDENTIFIER REMOTENAME

[贝塔] 添加一个新的远程配置

USAGE
  $ block add-remote BLOCKIDENTIFIER REMOTENAME

OPTIONS
  -h, --help  show CLI help

EXAMPLE
  $ block add-remote app12345678/blk12345678 new-remote

block help [COMMAND]

显示块的帮助

USAGE
  $ block help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

参见代码 : @oclif/plugin-帮助

block init BLOCKIDENTIFIER BLOCKDIRPATH

启动一个空中扩展项目

USAGE
  $ block init BLOCKIDENTIFIER BLOCKDIRPATH

OPTIONS
  -h, --help           show CLI help
  --template=template  [default: https://github.com/Airtable/apps-hello-world]

EXAMPLE
  $ block init app12345678/blk12345678 hello-world-extension --template https://github.com/Airtable/apps-hello-world

block list-remotes

[贝塔] 列出远程配置

USAGE
  $ block list-remotes

OPTIONS
  -h, --help  show CLI help

EXAMPLE
  $ block list-remotes

block release

将一个建筑放入一个气垫基地

USAGE
  $ block release

OPTIONS
  -h, --help       show CLI help
  --remote=remote  [Beta] Configure which remote to use

EXAMPLE
  $ block release

block remove-remote REMOTENAME

[贝塔] 删除远程配置

USAGE
  $ block remove-remote REMOTENAME

OPTIONS
  -h, --help  show CLI help

EXAMPLE
  $ block remove-remote old-remote

block run

本地运行扩展

USAGE
  $ block run

OPTIONS
  -h, --help       show CLI help
  --port=port      [default: 9000] HTTPS port the server listens on. The server will listen for HTTP on PORT + 1.
  --remote=remote  [Beta] Configure which remote to use

EXAMPLE
  $ block run

block set-api-key [APIKEY]

设置 Airtable 账户的个人访问符( 带有块: 管理范围) 上传到

USAGE
  $ block set-api-key [APIKEY]

OPTIONS
  -h, --help             show CLI help
  --location=(user|app)  [default: user]

EXAMPLE
  $ block set-api-key
  $ block set-api-key TOKEN
  $ block set-api-key --location app TOKEN

block submit

提交延期供审查,以便列入空中市场

USAGE
  $ block submit

OPTIONS
  -h, --help       show CLI help
  --remote=remote  Configure which remote to use

EXAMPLE
  $ block submit

V2 中的新特性

CSS 支助

默认情况下,新的 CLI 支持您的扩展名中的 SS 文件 。 默认的 Webpack 捆绑器是 配置了 cs-loader 和样式-loader 。 这意味着您可以导入一个 Css 文件到您的 扩展名。 示例

// styles.css
.red {
  color: red;
}

import {initializeBlock} from '@airtable/blocks/ui';
import React from 'react';
import './styles.css'

function MyExtension() {
    return <div className="red">Hello world</div>;
}

initializeBlock(() => <MyExtension />);

使用其他目录中的代码

新的 CLI 允许在源代码之外使用“ 姐妹目录” 来进行代码共享 要捆绑的目录 。 其他目录可以包括基于链接或文件的npm导入.

这里可以找到更多细节和实例.

自定义网络包配置

默认情况下,CLI会使用网页包来捆绑您的代码. 在框外,它支持使用平面 JavaScript 或 TypeScript 和通过 CSS 文件的样式. 如果您想要自定义网络包配置 另外,你可以安装 @airtable/blocks-webpack-bundler 软件包。 为了更多 关于安装此软件包和自定义 Webpack 配置的信息,请参见 README @airtable/blocks-webpack-bundler 软件包在 软件包/网包-捆绑器/README.md。 。 。 .

使用自定义捆绑器

如果自定义上面描述的网页包配置不能解决您的使用大小写,它也是 可完全用自定义执行替换捆绑器。 这需要 相当大的工作量.

自定义捆绑器允许用户替换 CLI 的内置捆绑功能会转弯 扩展源代码为可公布文物. 您的自定义捆绑器输出必须符合 Airtable平台的预期格式,调用会议,以及文件结构.

不同于其他捆绑系统,它们通过组合多个单一目的而允许配置 插件( 或仅取代捆绑管道的一部分), 此 CLI 曝光一个更简单的捆绑器 扩展 API ,它期望一个单一的,完整的替换捆绑功能.

要使用自定义捆绑器 :

1. 将您的捆绑器保存为JavaScript文件(即索引.js). 捆绑器必须是通用JS模块. 若为 以 TypeScript 编写的捆绑器, 您必须使用已转录的版本作为条目文件 .

2. 然后,更改块.json “ bundler.module”选项,以指向您新的 bunder 条目文件; 即:

// block.json
{
    “bundler”: {
        “module”: “./bundler/index.js”
    }
}

3. 一旦更改,请重新启动您的dev服务器(如果运行在dev服务器上).

捆绑者需要执行下列API:

class Bundler {
    async bundleAsync(options: ReleaseBundleOptions): Promise<void> {
        // implement release build
    }

    async findDependenciesAsync(options: SubmitFindDependenciesOptions): Promise<{files: Array<string>}> {
        // used in `block submit`
    }

    async startDevServerAsync(options: RunDevServerOptions & RunDevServerMethods): Promise<void> {
        // implement run development build
    }

    async teardownAsync(): Promise<void> {
        // implement any work needed to gracefully
        // close bundler process
    }
}

export default function() {
    return new Bundler();
}

For more details about the bundler API, see src/bundler/bundler.ts

静态资产仍没有违约支持,但现在可以在自己的捆绑器中互换 支持这个.