🐛 [Bug]: 引入自定义组件,如何解决外部依赖的问题

[qiangwai]

Environment

谷歌

Version

20

Version

LATEST

Link to minimal reproduction

null

Step to reproduce

我想引入我自定义的组件：https://unpkg.com/[email protected]/dist/index.js
我这个包会有一定的依赖 比如

import { useEventBus } from '@vueuse/core';
import axios from 'axios';

在materials中引入这个组件后 会有报错

我该如何添加这些依赖，或者我打包必须也把这些依赖也打出来吗？

What is expected

给出一个解决外部依赖的解决方案

What is actually happening

缺失依赖引用会报错

What is your project name

null

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: How to solve the problem of external dependencies when introducing custom components

[chilingling]

可以在物料中声明对应依赖的 script。

假设组件库中打包将 axios 以及 @vueuse/core 作为 external。
那么我们可以增加如下声明：即可在画布正常渲染组件

// packages/design-core/config/lowcode.config.js

export default {
  canvasOptions: {
    Vue: {
       material: ['xxx'], //物料地址
       scripts: ['xxxaxios', 'xxxvuesecore'], // 组件库依赖的 script
       styles: ['xxxx']
    }
  }
}

PS：关于出码，假如组件库的 external package 需要额外声明，则我们需要在出码模板中增加对应的 package 依赖声明

@qiangwai

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

The corresponding dependent script can be declared in the material.

Assume that the component library packages axios and @vueuse/core as external.
Then we can add the following statement: The component can be rendered normally on the canvas

// packages/design-core/config/lowcode.config.js

export default {
  canvasOptions: {
    Vue: {
       material: ['xxx'], //Material address
       scripts: ['xxxaxios', 'xxxvuesecore'], // scripts that the component library depends on
       styles: ['xxxx']
    }
  }
}

PS: Regarding decoding, if the external package of the component library requires additional declarations, we need to add the corresponding package dependency declaration in the decoding template.

@qiangwai