@bytedance/mona-cli

介绍

mona-cli是电商商家应用的CLI工具，主要为了能够提升商家应用在各端开发和运行效率，统一开放方案，从而保证安全开放。

快速开始

安装CLI

快速开始开发一个插件需要先安装该CLI工具，使用如下命令进行安装

npm install -g @bytedance/mona-cli
// 或使用yarn安装，任选其一
yarn global add @bytedance/mona-cli

安装完成后，控制台输入

mona -v

能正确打印出版本，则表明安装成功

初始化项目

下面我们来初始化一个项目，使用如下命令

mona init

按照提示依次输入项目名称，选择模板，选择是否使用typescript和样式预处理器 注意：模板目前仅支持Plugin

开发

项目初始化完成后可以进行开发，使用如下命令启动开发服务器，可以实时调试

mona start

打包

开发完成后，对项目进行打包，可以使用如下命令

mona build

发布

项目打包完成后，可以使用如下命令，对待发布资源进行压缩

mona publish

生成后的压缩包，需要在开放平台 -> 应用管理 -> 插件管理 -> 新增版本中上传该压缩包，并填写版本描述

目录结构

.
├── README.md
├── app.config.ts // 应用配置文件
├── mona.config.ts // 项目配置文件
├── package.json
├── src
│   ├── app.tsx
│   ├── common
│   ├── components
│   │   └── Wrapper
│   │       ├── index.less
│   │       └── index.tsx
│   ├── pages
│   │   ├── Home
│   │   │   ├── index.less
│   │   │   ├── index.tsx
│   │   │   └── page.config.ts // 页面配置文件
│   │   ├── Info
│   │   │   ├── index.tsx
│   │   │   └── page.config.ts
│   │   └── List
│   │       ├── index.tsx
│   │       └── page.config.ts
│   └── typings
│       └── assetsDefinition.d.ts
└── tsconfig.json

所有的页面文件应放在pages中，所有的组件文件应放在components中。

项目构建配置文件为mona.config.ts，可以在该文件中更改构建配置

应用配置文件为app.config.ts，可以在该文件中配置路由

页面配置文件分别放在页面文件下page.config.ts中，可以在这里配置页面相关的配置

详细配置见下面的配置介绍

svg

svg资源会使用@svgr/webpack处理成React组件，可以直接通过组件的方式来引入svg图片，示例

import Logo from '@/common/imgs/logo.svg';

const App = () => {
  return (
    <div>
      <Logo className={styles.logo} />
    </div>
  )
}

export default App

配置

项目配置

项目配置文件为项目根目录下的mona.config.js，配置文件内容如下：

// mona.config.ts
import { createProjectConfig } from '@bytedance/mona';
export default createProjectConfig({
  projectName: 'demo',
  input: './src/app.tsx',
  output: 'dist'
})

应用配置

应用配置文件为项目根目录下的app.config.js，配置文件内容如下：

// app.config.ts
import { createAppConfig } from '@bytedance/mona';
export default createAppConfig({
  pages: [
    'pages/Home/index',
    'pages/Info/index',
    'pages/List/index'
  ]
})

默认pages的第一项为首页

页面配置

页面配置文件为每个页面目录下的page.config.js，配置文件内容如下：

// page.config.ts
import { createPageConfig } from '@bytedance/mona';
export default createPageConfig({
  navigationBarTitleText: 'page title'
})

命令

可以使用mona -h查看帮助命令，mona -v查看当前版本

mona init

初始化一个商家应用/商家应用插件项目

• -h, --help：输出帮助信息
• -u, --use-typescript：是否使用typescript
• -s, --style：指定样式处理器(css/less)
• -t, --template：指定模板(plugin)

mona start

启动本地开发服务器

• -h, --help：输出帮助信息
• -p, --port：指定本地服务器端口

mona build

对项目进行打包

• -h, --help：输出帮助信息

mona publish

压缩打包后的产物，以便在开放平台发布

• -h, --help：输出帮助信息

mona update

更新@bytedance/mona-cli到最新版本