card.buld.md · 吕志超/card-vite - Gitee

Create your Gitee Account

Explore and code with more than 12 million developers，Free private repositories ！：）

This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.

Clone or Download

card.buld.md 1.12 KB

Copy Edit Raw Blame History

authored 2024-08-28 23:14 . feat: card打包配置

# 卡片打包成js并实现远端加载卡片

## 备用知识

### 如何自定义npm脚本并传参

```js
//  package.json
"scripts":{
    "devByCustomMode": "vite --mode %npm_config_mode%",
}
//  maint.ts
console.log("import.meta.env: ", import.meta.env.VITE_ENVIRONMENT);

// 执行命令
npm run devByCustomMode --mode=cbg-test
// 检查打印台，是否在main.ts中输出了cbg-tes
```

当以命令行方式运行bite时，vite会自动解析项目根目录下名为vite.config.ts的配置文件也可以是显式地通过 --config 命令行选项指定一个配置文件

```bash
$ vite --config vite.card.config.ts build
$ vite -c vite.card.config.ts build
```

相应的在package.json中配置命令

```js
"scripts": {
    "buildCard": "vite -c vite.card.config.ts build --mode %npm_config_card-params%"
}
// 此处可以约定card-params = `${mode}:${card-name || file-name || folder-name}`
```

在命令行运行

```bash
npm run buildCard --card-params=cbg-test:card-one
```

完成了vite.cards.config.ts继续补充package.json中的新打包命令

```js
"scripts": {
    "buildCard": "vite -c vite.cards.config.ts build"
}
```

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/hellow-world-lzc/card-vite.git

git@gitee.com:hellow-world-lzc/card-vite.git

hellow-world-lzc

card-vite

card-vite

master