rollup(读ArkAnalyzer时配置环境出现的rollup打包详解)_rollup打包 报错了[!] typeerror: cannot add property 0,
rollup 是一个 JavaScript 模块打包工具，可以将多个模块的代码打包成一个单独的文件（例如 bundle.js）。这样做的目的是将整个 ArkAnalyzer 的代码打包成一个文件，便于在其他项目中引用和使用。
步骤 1: 初始化项目（如果 ArkAnalyzer 包中已有 package.json，可跳过）
1. 打开命令行终端（在 Windows 上是命令提示符或 PowerShell，在 macOS/Linux 上是终端）。 2. 进入你的 ArkAnalyzer 目录（即包含源代码的目录）。
3. 运行以下命令初始化项目（会生成 package.json 文件）：
```bash
npm init -y
```
步骤 2: 安装 Rollup 和必要的插件
在 ArkAnalyzer 目录下，运行以下命令安装 rollup 以及一些常用的插件（如果 ArkAnalyzer 已经提供了 package.json，并且里面已经包含了这些依赖，那么只需要运行 `npm install` 即可）
1. 安装 Rollup 核心包和命令行工具：
```bash
npm install --save-dev rollup
```
2. 安装 TypeScript 插件（因为 ArkAnalyzer 是用 TypeScript 写的）：
```bash
npm install --save-dev @rollup/plugin-typescript
```
3. 安装 TypeScript 本身（如果还没有安装）：
```bash
npm install --save-dev typescript
```
4. 安装 tslib（TypeScript 的运行库）：
```bash
npm install tslib
```
步骤 3: 创建 Rollup 配置文件
在 ArkAnalyzer 根目录下创建一个名为 `rollup.config.js` 的文件，内容如下：
```javascript
// rollup.config.js
import typescript from \'@rollup/plugin-typescript\';
export default {
input: \'src/index.ts\', // 修改为你的主入口文件
output: {
file: \'bundle.js\', // 输出文件名
format: \'cjs\' // 打包格式
},
plugins: [
typescript() // TypeScript 支持
]
};
```
注意：这里的入口文件 `src/index.ts` 需要根据你的项目实际情况调整。通常，它是整个项目的入口文件，会导出所有外部需要使用的类和方法（例如 SceneConfig, Scene 等）。
步骤 4: 修改 package.json 添加打包脚本
在 package.json 文件中，找到 \"scripts\" 部分，添加一个打包命令：
```json
{
\"scripts\": {
\"build\": \"rollup -c\" // 添加这行
},
\"devDependencies\": {
// 确保包含这些
\"@rollup/plugin-typescript\": \"^11.0.0\",
\"typescript\": \"^5.0.0\"
}
}
```
步骤 5: 运行打包命令
在命令行中运行：
```bash
npm run build
```
如果一切顺利，你会在 ArkAnalyzer 目录下看到生成的 `bundle.js` 文件。
完成以上步骤后，我在写的时候出现了这样的警告信息和报错：
警告忽略没管，报错的话是因为：
TypeScript 的 outDir 配置路径与 Rollup 的输出路径不一致。Rollup 的 TypeScript 插件要求 outDir 必须位于 Rollup 输出文件（file 或 dir）所在的目录下，或者与输出目录相同。
解决方案
1. 调整 tsconfig.json 中的 outDir
确保 tsconfig.json 中的 outDir 路径与 Rollup 的输出目录一致。
{
\"compilerOptions\": {
\"target\": \"ES2018\",
\"module\": \"ESNext\",
\"outDir\": \"./out\", // 必须与 Rollup 的输出目录一致
\"rootDir\": \"./src\",
\"declaration\": true,
\"declarationDir\": \"./dist/types\", // 可选：声明文件输出目录（需位于 outDir 下）
\"strict\": true,
\"esModuleInterop\": true
},
\"include\": [\"src/**/*\"]
}
2. 检查 Rollup 的输出配置
在 rollup.config.cjs 中，确保 output 的 file 或 dir 路径与 tsconfig.json 的 outDir 一致。
import typescript from \'@rollup/plugin-typescript\';
export default {
inputhuawei: \'./src/index.ts\',
output: { file: \'./out/bundle.js\', // 输出文件路径 format: \'cjs\'
},
plugins: [ typescript({ tsconfig: \'./tsconfig.json\' // 显式指定 tsconfig.json 路径 }) ]
};
不过这样会导致bundle.js生成在out文件下，这个问题尚未解决。
