---
title: "迁移你的应用至SHOPLINE CLI"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/migrate-your-app-to-shopline-cli'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/migrate-your-app-to-shopline-cli.md'
---
# 迁移你的应用至SHOPLINE CLI

为了提升开发效率和体验，我们推荐使用 SHOPLINE CLI 来开发你的应用。通过 SHOPLINE CLI，你可以快速解决 [Partner Portal](https://developer.myshopline.com/) 的登录问题，同步应用设置，并在本地项目中轻松管理应用配置。<br/>
如果你是首次开发 SHOPLINE 应用，请直接按照 [SHOPLINE CLI 如何构建应用](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/build-apps-using-shopline-cli.md?lang=zh-hans-cn )
 指南进行操作，无需阅读以下内容。<br/> 
对于已上线或正在开发的应用，我们强烈建议你按照本指南将应用迁移至 SHOPLINE CLI，以享受更加便捷的开发流程。


## CLI 优点
使用 SHOPLINE CLI 构建应用包含以下优点：
- **统一的配置文件管理**：采用语义简单、直观的 [TOML](https://toml.io/en/) 格式配置文件，方便管理应用配置。
- **标准清晰的应用结构**：通过 SHOPLINE CLI 构建标准 [应用结构](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/app-structure.md?lang=zh-hans-cn)，简化集成开发。
- **本地预览和调试**：支持使用指令在本地预览和调试应用程序，实时查看效果并快速定位问题，加速开发迭代。


## 如何迁移
### 标准化目录结构
```bash
- <App Name>
  |-- app				       服务端开发的目录入口
      └──shopline.web.toml	   服务端开发配置文件
  |-- web
      |-- src
          └── index.tsx
      |-- vite.config.ts
      └── shopline.web.toml	   Web前端开发配置文件
  |-- package.json
  |-- shopline.app.toml        应用配置文件
```


按照如上标准的目录结构来进行应用开发，以维持项目的可拓展性。其中关键目录说明如下：

- app 目录：用于存放服务端代码开发逻辑。
- web 目录：用于存放客户端代码开发逻辑。

如果你的项目中还没有对应的 `shopline.app.toml`或 `shopline.web.toml` 文件，你可以按照以下步骤创建它们：

1. 在 `<App Name>` 目录下创建 `shopline.app.toml` 文件，用于存放应用相关配置信息。
2. 在 `<App Name>/app`和 `<App Name>/web`目录下创建 `shopline.web.toml` 文件，用于配置应用开发相关启动和构建命令。关于不同 `shopline.web.toml`文件区别，可以参考 [SHOPLINE应用结构文档](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/shopline-cli/app-structure.md?lang=zh-hans-cn)。

### 新建配置文件
配置文件是 SHOPLINE 应用结构中的必要内容，通过使用置文件，你可以指定应用的启动命令、依赖项、环境变量等配置信息。以下将向你详细介绍如何创建必要的 TOML 文件以及配置它，以便让 CLI 能够准确读取配置并启动应用。

#### 应用配置
`app toml`是应用的配置文件，首先需要新建一个 `shopline.app.toml`并将其配置成如下格式，其中权限点是文件的必要内容。

```bash
[access_scopes]
scopes = "write_products"

```

以上权限点取决于应用所需要调用的 Open API，具体的权限点内容可以查看文档[权限点列表](https://developer.shopline.com/zh-hans-cn/docs/apps/api-instructions-for-use/access-scope.md)，同时在应用安装的时候也会提示商家需要授权的权限点内容。


> **Caution**
>
> `shopline.app.toml` 必须放在当前根目录`App Name`下，否则 `CLI`启动的时候将无法准确读取。

#### 启动配置
`web toml`是应用启动所需的配置文件，有关进程启动相关的内容，我们建议配置在对应类型的`web.toml`文件上面。

在上述提到的标准目录结构中，建议你将 `<App Name>/app`作为服务端开发的入口，`<App Name>/web`作为客户端开发的入口文件。因此，对于 web.toml 的配置，也十分简单，只需要在这两个入口文件下各新建一个`shopline.web.toml`即可。接下来，我们将先讲解客户端的 shopline.web.toml 配置。

##### Web前端配置
Web 前端启动配置是由 Node.js 来实现的。无论你选择的构建工具是 Webpack、Vite、Rspack 或是其它，你只需要通过 npm 来运行 `run start` 或 `run dev` 命令即可，`package.json` 文件中配置的脚本决定具体的启动命令。配置内容参考如下。

```typescript
type="frontend"

[commands]
dev = "npm run dev"
build = "npm run build"

```

#### 服务端配置
Server 端的 `shopline.web.toml`就比较复杂 因为实现服务端的语言是不确定的 这里就需要开发者根据自己开发的语言来决定对应的配置文件的格式。

这里我们会简单示范`node`和 `go`两种语言的配置内容：

- node server
```typescript
type="backend"

[commands]
dev = "npm run dev"
build = "npm run build"
```

- go server
```typescript
type="backend"

[commands]
dev = "go run main.go"
build = "go build"

```

### 安装依赖
到了这一步，恭喜你已经完成了配置文件的迁移。下面是关于新建`package.json`以及依赖安装的内容。

如果你之前是服务端开发人员并且不以`node`作为开发语言 需要你前往 [node官网](https://nodejs.org/en) 安装稳定版本再继续下面的内容

首先你可以在根目录下新建一个`package.json`，然后配置以下信息：

```json
{
  "name": "shopline-app-template",
  "version": "1.0.0",
  "scripts": {
    "shopline": "shopline",
    "build": "shopline app build",
    "dev": "shopline app dev",
    "dev:reset": "shopline app dev --reset",
  },
  "dependencies": {},
  "author": "SHOPLINE",
  "devDependencies": {
    "@shoplineos/app": "2.1.0",
    "@shoplineos/cli": "2.1.0"
  }
}
```

接下来，在项目的根目录下运行以下命令来安装依赖包。
```bash
npm install
```

除了在根目录下安装依赖外，通常你还需要在 `<App Name>/app` 和 `<App Name>/web` 下安装对应语言所需的依赖。

### 启动应用
依赖安装完成后， 你可以通过下面的命令来启动你的应用

```bash
npm run dev
```

`dev`指定启动之后，`CLI`会生成一个内网穿透的地址 并将其上传到 `Partner Portal`上面对应应用的 `应用地址`上。
![应用结构.png](https://s2cdn.myshopline.com/slfs/op-new/171945774292220/应用结构.png)

应用启动成功后，就会出现上面这个预览地址，此时代表你已经成功的完成迁移。