Match-id-801ce3abac65460690931385cff178a185495d70
This commit is contained in:
*
parent
69a5a3ffd3
commit
95fbc86a62
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
### 安装Nodejs
|
||||
|
||||
horizon-cli的运行需要依赖Nodejs，使用前请确保您的电脑已安装Nodejs，并且版本在16以上。您可以通过在控制台执行以下命令来确认您的版本。
|
||||
inula-cli的运行需要依赖Nodejs，使用前请确保您的电脑已安装Nodejs，并且版本在16以上。您可以通过在控制台执行以下命令来确认您的版本。
|
||||
|
||||
```
|
||||
>node -v
|
||||
|
|
@ -26,18 +26,18 @@ nvm最新版本下载: [https://github.com/coreybutler/nvm-windows/releases](htt
|
|||
|
||||
执行完成后，可以通过node -v确认安装是否成功。
|
||||
|
||||
### 安装horizon-cli
|
||||
### 安装inula-cli
|
||||
|
||||
为了方便使用horizon-cli的功能，推荐您全局安装horizon-cli。Nodejs安装会自带npm工具用于管理模块，您可以直接运行如下命令：
|
||||
为了方便使用inula-cli的功能，推荐您全局安装inula-cli。Nodejs安装会自带npm工具用于管理模块，您可以直接运行如下命令：
|
||||
|
||||
```
|
||||
>npm install -g @cloudsop/horizon-cli
|
||||
>npm install -g inula-cli
|
||||
```
|
||||
|
||||
安装完成后，使用horizon-cli version命令确认安装是否完成。
|
||||
安装完成后，使用inula-cli version命令确认安装是否完成。
|
||||
|
||||
```
|
||||
>horizon-cli version
|
||||
>inula-cli version
|
||||
1.1.0
|
||||
```
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ nvm最新版本下载: [https://github.com/coreybutler/nvm-windows/releases](htt
|
|||
|
||||
## 二、目录结构
|
||||
|
||||
horizon-cli的推荐目录结构如下：
|
||||
inula-cli的推荐目录结构如下：
|
||||
|
||||
```
|
||||
├── dist // 构建产物目录
|
||||
├── node_modules // 项目依赖
|
||||
│ └── @cloudsop
|
||||
│ └── horizon-cli
|
||||
│ └── @inula
|
||||
│ └── inula-cli
|
||||
│ ├── lib
|
||||
├── mock // mock目录
|
||||
│ └── mock.ts
|
||||
|
|
@ -66,7 +66,7 @@ horizon-cli的推荐目录结构如下：
|
|||
│ ├── entry.(ts|tsx)
|
||||
├── .env // 项目环境变量文件
|
||||
├── plugin.ts // 插件文件
|
||||
├── .horizon.ts|js // horizon-cli配置文件
|
||||
├── .inula.ts|js // inula-cli配置文件
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
```
|
||||
|
|
@ -75,11 +75,11 @@ horizon-cli的推荐目录结构如下：
|
|||
|
||||
## 三、环境变量
|
||||
|
||||
horizon-cli支持开发者使用环境变量来定义一些配置。
|
||||
inula-cli支持开发者使用环境变量来定义一些配置。
|
||||
|
||||
### 环境变量配置方法
|
||||
|
||||
horizon-cli默认将项目根路径下的.env文件视为环境变量配置文件。.env文件应遵循properties文件格式。
|
||||
inula-cli默认将项目根路径下的.env文件视为环境变量配置文件。.env文件应遵循properties文件格式。
|
||||
|
||||
如果项目在本地开发时需要做一些自定义配置，支持同时配置.local.env文件，相同名称的环境变量会以.local.env中的生效。
|
||||
|
||||
|
|
@ -87,14 +87,14 @@ horizon-cli默认将项目根路径下的.env文件视为环境变量配置文
|
|||
|
||||
## 四、配置文件
|
||||
|
||||
horizon-cli支持用户通过项目根目录下的.horizon.ts或者.horizon.js文件进行自定义配置。当两个文件同时存在时，会优先选取.horizon.ts作为项目配置。如果您对配置文件还需要额外定制，可以在环境变量中添加RUNNING_MODE字段，RUNNING_MODE允许额外再定制一份配置文件，例如RUNNING_MODE=cloud，horizon-cli会寻找名称为.horizon.cloud.ts/js的配置文件。
|
||||
inula-cli支持用户通过项目根目录下的.inula.ts或者.inula.js文件进行自定义配置。当两个文件同时存在时，会优先选取.inula.ts作为项目配置。如果您对配置文件还需要额外定制，可以在环境变量中添加RUNNING_MODE字段，RUNNING_MODE允许额外再定制一份配置文件，例如RUNNING_MODE=cloud，inula-cli会寻找名称为.inula.cloud.ts/js的配置文件。
|
||||
|
||||
### 配置文件定义
|
||||
|
||||
在配置文件中，您需要默认导出一个配置，以下为一个简单的配置文件示例：
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
export default {
|
||||
enableMock: true,
|
||||
|
|
@ -114,9 +114,9 @@ export default {
|
|||
对于TypeScript类型，我们也提供了类型定义以供开发时自动补全：
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
import { defineConfig } from "@cloudsop/horizon-cli"
|
||||
import { defineConfig } from "inula-cli"
|
||||
|
||||
export default defineConfig({
|
||||
enableMock: true,
|
||||
|
|
@ -151,64 +151,64 @@ export default defineConfig({
|
|||
|
||||
## 五、插件
|
||||
|
||||
horizon-cli的所有功能都围绕插件展开，插件可以很方便地让用户集成各式各样的功能，用户可以通过配置自由搭配组合各式各样的插件能力。
|
||||
inula-cli的所有功能都围绕插件展开，插件可以很方便地让用户集成各式各样的功能，用户可以通过配置自由搭配组合各式各样的插件能力。
|
||||
|
||||
### 插件执行流程
|
||||
|
||||
所有插件的触发都从用户执行命令开始。当用户执行命令后，horizon-cli会加载用户的配置文件.获取到插件列表后，会依次加载内部插件和用户自定义插件，通过horizon-cli提供的api对象，向horizon-cli注册命令以及hook。最后根据用户的命令选择最终执行的方法。
|
||||
所有插件的触发都从用户执行命令开始。当用户执行命令后，inula-cli会加载用户的配置文件.获取到插件列表后，会依次加载内部插件和用户自定义插件，通过inula-cli提供的api对象，向inula-cli注册命令以及hook。最后根据用户的命令选择最终执行的方法。
|
||||
|
||||
|
||||
### 使用插件
|
||||
|
||||
#### 使用内置插件
|
||||
|
||||
内置插件在horizon-cli运行时会自动加载，用户可以直接调用这些内置命令，当前支持的内置插件功能如下：
|
||||
内置插件在inula-cli运行时会自动加载，用户可以直接调用这些内置命令，当前支持的内置插件功能如下：
|
||||
|
||||
| 序号 | 插件功能 | 触发命令 |
|
||||
| ---- | :----------------------- | ------------------- |
|
||||
| 1、 | 本地开发构建 | horizon-cli dev |
|
||||
| 2、 | 生产构建 | horizon-cli build |
|
||||
| 3、 | 接口mock能力 | horizon-cli dev |
|
||||
| 4、 | 远端服务器页面热更新能力 | horizon-cli dev |
|
||||
| 5、 | 远端服务器页面代理能力 | horizon-cli proxy |
|
||||
| 6、 | 显示版本 | horizon-cli version |
|
||||
| 7、 | 显示帮助 | horizon-cli help |
|
||||
| 1、 | 本地开发构建 | inula-cli dev |
|
||||
| 2、 | 生产构建 | inula-cli build |
|
||||
| 3、 | 接口mock能力 | inula-cli dev |
|
||||
| 4、 | 远端服务器页面热更新能力 | inula-cli dev |
|
||||
| 5、 | 远端服务器页面代理能力 | inula-cli proxy |
|
||||
| 6、 | 显示版本 | inula-cli version |
|
||||
| 7、 | 显示帮助 | inula-cli help |
|
||||
|
||||
#### 使用其他开发者发布的插件
|
||||
|
||||
horizon-cli支持用户集成已发布在npm仓库的插件，用户可以按需安装并运行这些插件。
|
||||
inula-cli支持用户集成已发布在npm仓库的插件，用户可以按需安装并运行这些插件。
|
||||
|
||||
安装可以通过npm安装，这里以插件@cloudsop/add为例：
|
||||
安装可以通过npm安装，这里以插件@inula/add为例：
|
||||
|
||||
```
|
||||
npm i --save-dev @cloudsop/add
|
||||
npm i --save-dev @inula/add
|
||||
```
|
||||
|
||||
如果需要运行插件，需要在配置文件中配置对应的插件路径
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
export default {
|
||||
...
|
||||
plugins:["@cloudsop/add"]
|
||||
plugins:["@inula/add"]
|
||||
}
|
||||
```
|
||||
|
||||
如果需要使用node_modules中的插件，可以只填写插件模块名，horizon-cli会自动在node_modules里寻找模块并导入该模块。
|
||||
如果需要使用node_modules中的插件，可以只填写插件模块名，inula-cli会自动在node_modules里寻找模块并导入该模块。
|
||||
|
||||
### 开发自定义插件
|
||||
|
||||
#### 为horizon-cli添加命令
|
||||
#### inula-cli添加命令
|
||||
|
||||
我们可以通过api的registerCommand为horizon-cli添加自定义命令，示例如下：
|
||||
我们可以通过api的registerCommand为inula-cli添加自定义命令，示例如下：
|
||||
|
||||
1、编写命令插件文件，这里我们自定义了一个conf命令用于展示当前项目的配置信息。
|
||||
|
||||
```
|
||||
// conf.ts
|
||||
|
||||
import { API } from "@cloudsop/horizon-cli";
|
||||
import { API } from "inula-cli";
|
||||
|
||||
export default (api: API) => {
|
||||
api.registerCommand({
|
||||
|
|
@ -225,17 +225,17 @@ export default (api: API) => {
|
|||
2、在配置文件中加入对插件的引用
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
export default {
|
||||
plugins: ["./conf"]
|
||||
}
|
||||
```
|
||||
|
||||
3、在项目根目录下执行horizon-cli conf即可触发插件运行。
|
||||
3、在项目根目录下执行inula-cli conf即可触发插件运行。
|
||||
|
||||
```
|
||||
> horizon-cli conf
|
||||
> inula-cli conf
|
||||
current user config is: {
|
||||
plugins: [ './conf', './showConf' ],
|
||||
}
|
||||
|
|
@ -243,14 +243,14 @@ current user config is: {
|
|||
|
||||
#### 为插件添加hook
|
||||
|
||||
horizon-cli提供了hook机制可以让开发者在执行命令时实现事件监听和触发能力，
|
||||
inula-cli提供了hook机制可以让开发者在执行命令时实现事件监听和触发能力，
|
||||
|
||||
1、使用插件注册hook
|
||||
|
||||
```
|
||||
// modifyConfig.ts
|
||||
|
||||
import { API } from "@cloudsop/horizon-cli";
|
||||
import { API } from "inula-cli";
|
||||
|
||||
export default (api: API) => {
|
||||
api.registerHook({
|
||||
|
|
@ -270,7 +270,7 @@ export default (api: API) => {
|
|||
```
|
||||
// conf.ts
|
||||
|
||||
import { API } from "@cloudsop/horizon-cli";
|
||||
import { API } from "inula-cli";
|
||||
|
||||
export default (api: API) => {
|
||||
api.registerCommand({
|
||||
|
|
@ -288,7 +288,7 @@ export default (api: API) => {
|
|||
3、在配置文件中加入插件
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
export default {
|
||||
plugins: ["./conf", "./modifyConfig"]
|
||||
|
|
@ -298,7 +298,7 @@ export default {
|
|||
4、触发命令
|
||||
|
||||
```
|
||||
> horizon-cli conf
|
||||
> inula-cli conf
|
||||
current user config is: {
|
||||
plugins: [ './conf', './showConf' ],
|
||||
buildConfig: {path: './webpack.config.js'},
|
||||
|
|
@ -325,7 +325,7 @@ current user config is: {
|
|||
|
||||
1、registerCommand
|
||||
|
||||
registerCommand方法允许用户自定义horizon-cli的执行命令，
|
||||
registerCommand方法允许用户自定义inula-cli的执行命令，
|
||||
|
||||
```
|
||||
api.registerCommand({
|
||||
|
|
@ -339,12 +339,12 @@ registerCommand方法允许用户自定义horizon-cli的执行命令，
|
|||
- name：命令名称。
|
||||
- description：命令描述，用于help命令作展示。
|
||||
- initialState：命令初始属性。
|
||||
- fn：命令回调函数，参数args为调用horizon-cli命令时传入的参数，已默认去除掉命令本身，结构同yargs-parser。state为执行时的命令属性。
|
||||
- fn：命令回调函数，参数args为调用inula-cli命令时传入的参数，已默认去除掉命令本身，结构同yargs-parser。state为执行时的命令属性。
|
||||
|
||||
使用示例：
|
||||
|
||||
```
|
||||
import { API } from "@cloudsop/horizon-cli";
|
||||
import { API } from "inula-cli";
|
||||
|
||||
export default (api: API) => {
|
||||
api.registerCommand({
|
||||
|
|
@ -360,7 +360,7 @@ export default (api: API) => {
|
|||
|
||||
2、registerHook
|
||||
|
||||
registerHook用于向horizon-cli注册hook事件
|
||||
registerHook用于向inula-cli注册hook事件
|
||||
|
||||
```
|
||||
api.registerHook({
|
||||
|
|
@ -375,7 +375,7 @@ api.registerHook({
|
|||
使用示例：
|
||||
|
||||
```
|
||||
import { API } from "@cloudsop/horizon-cli";
|
||||
import { API } from "inula-cli";
|
||||
|
||||
export default (api: API) => {
|
||||
api.registerHook({
|
||||
|
|
@ -404,7 +404,7 @@ applyHook(name: string, value?: any})
|
|||
使用示例：
|
||||
|
||||
```
|
||||
import { API } from "@cloudsop/horizon-cli";
|
||||
import { API } from "inula-cli";
|
||||
|
||||
export default (api: API) => {
|
||||
api.registerCommand({
|
||||
|
|
@ -425,10 +425,10 @@ export default (api: API) => {
|
|||
|
||||
### 生产构建
|
||||
|
||||
horizon-cli默认集成生产构建能力，用户可以通过在.horizon.ts中配置buildConfig字段启用功能。配置示例如下：
|
||||
inula-cli默认集成生产构建能力，用户可以通过在.inula.ts中配置buildConfig字段启用功能。配置示例如下：
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
// 使用webpack构建
|
||||
export default {
|
||||
|
|
@ -458,7 +458,7 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
生产构建支持传入多个配置文件路径，使用webpack构建还支持配置文件以函数方式导出，horizon-cli会将配置中的env和args作为参数传递到函数中执行以获取最后的构建配置。
|
||||
生产构建支持传入多个配置文件路径，使用webpack构建还支持配置文件以函数方式导出，inula-cli会将配置中的env和args作为参数传递到函数中执行以获取最后的构建配置。
|
||||
|
||||
```
|
||||
// webpack.config.js
|
||||
|
|
@ -474,7 +474,7 @@ module.exports = function (env, argv) {
|
|||
}
|
||||
}
|
||||
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
export default {
|
||||
compileMode: 'webpack',
|
||||
|
|
@ -495,10 +495,10 @@ export default {
|
|||
|
||||
### 本地构建
|
||||
|
||||
horizon-cli默认也支持项目本地构建，用户可以通过在.horizon.ts中配置devBuildConfig字段启用功能。配置示例如下：
|
||||
inula-cli默认也支持项目本地构建，用户可以通过在.inula.ts中配置devBuildConfig字段启用功能。配置示例如下：
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
// 使用webpack构建
|
||||
export default: {
|
||||
|
|
@ -532,13 +532,13 @@ Mock功能广泛应用于前端开发中，Mock能力可以模拟出后端服务
|
|||
|
||||
### 如何使用Mock
|
||||
|
||||
horizon-cli已经将Mock功能作为内置插件能力，当您无论使用webpack还是vite构建项目时都可以自动启用。如果您不想使用Mock功能，可以自行在配置文件中关闭。
|
||||
inula-cli已经将Mock功能作为内置插件能力，当您无论使用webpack还是vite构建项目时都可以自动启用。如果您不想使用Mock功能，可以自行在配置文件中关闭。
|
||||
|
||||
horizon-cli已经将Mock功能作为内置插件能力，当您无论使用webpack还是vite构建项目时都可以自动启用。如果您不想使用Mock功能，可以自行在配置文件中关闭。该目录下所有文件视为mock文件。例如：
|
||||
inula-cli已经将Mock功能作为内置插件能力，当您无论使用webpack还是vite构建项目时都可以自动启用。如果您不想使用Mock功能，可以自行在配置文件中关闭。该目录下所有文件视为mock文件。例如：
|
||||
|
||||
### Mock目录
|
||||
|
||||
horizon-cli自动将项目根路径里/Mock目录下所有文件视为mock文件。例如：
|
||||
inula-cli自动将项目根路径里/Mock目录下所有文件视为mock文件。例如：
|
||||
|
||||
```
|
||||
├── mock
|
||||
|
|
@ -553,7 +553,7 @@ horizon-cli自动将项目根路径里/Mock目录下所有文件视为mock文件
|
|||
如果您想修改Mock目录位置，可以在配置文件中修改mockPath。如果不配置该参数，默认使用"./mock"。
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
export default {
|
||||
...
|
||||
enableMock: true,
|
||||
|
|
@ -646,7 +646,7 @@ export default [
|
|||
|
||||
远端页面热更新能力是指在不修改远端服务器文件的前提下，当开发者在本地调试、修改项目代码时，可以实时在远端页面生效，并且能够与远端其他接口正常完成交互，其实现原理如下：
|
||||
|
||||
|
||||
|
||||
|
||||
用户在启动dev调试后，devServer会根据matcher中的判断逻辑决定该接口从本地项目获取还是从远端服务器获取，同时本地项目会根据用户修改代码实时编译，这样可以使得devServer拥有热更新能力。
|
||||
|
||||
|
|
@ -655,7 +655,7 @@ export default [
|
|||
在框架配置文件中，开发者需要配置远端服务器地址以及编写自定义的matcher函数提供给框架：
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
const matcher = (pathname, request) => {
|
||||
// 这里我们假设以"/user"开头的接口由本地项目提供，其余接口从远端获取
|
||||
|
|
@ -677,20 +677,20 @@ export default {
|
|||
|
||||
```
|
||||
|
||||
配置完成后，直接运行horizon-cli dev，即可进行热调试。
|
||||
配置完成后，直接运行inula-cli dev，即可进行热调试。
|
||||
|
||||
## 八、**远端静态接口代理**能力
|
||||
|
||||
远端代理也是开发测试过程中常用能力之一，尤其是在开发大型项目时，需要修改其中的一个或多个接口时，可以使用远端代理将需要修改的客户端接口重定向到本地修改后的文件，快速进行问题分析和修改验证。
|
||||
|
||||
|
||||
|
||||
|
||||
### 使用方法
|
||||
|
||||
用户可以在.horizon.ts中配置remoteProxy字段开启远端静态接口代理能力，完成配置后，使用后执行horizon-cli proxy启动该功能。
|
||||
用户可以在.inula.ts中配置remoteProxy字段开启远端静态接口代理能力，完成配置后，使用后执行inula-cli proxy启动该功能。
|
||||
|
||||
```
|
||||
// .horizon.ts
|
||||
// .inula.ts
|
||||
|
||||
export default {
|
||||
remoteProxy: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue