Rollup 如何与 TypeScript 集成？

推荐答案

要将 Rollup 与 TypeScript 集成，可以按照以下步骤进行：

1. 安装必要的依赖：

   npm install rollup @rollup/plugin-typescript typescript tslib --save-dev

2. 配置 Rollup 配置文件： 在 rollup.config.js 中引入 TypeScript 插件并进行配置：

   // www.javascriptcn.com code example
   import typescript from '@rollup/plugin-typescript';
   
   export default {
     input: 'src/main.ts', // 入口文件
     output: {
       file: 'dist/bundle.js', // 输出文件
       format: 'cjs', // 输出格式
     },
     plugins: [
       typescript(), // 使用 TypeScript 插件
     ],
   };

3. 配置 TypeScript： 在项目根目录下创建 tsconfig.json 文件，配置 TypeScript 编译选项：

   // www.javascriptcn.com code example
   {
     "compilerOptions": {
       "target": "es5",
       "module": "esnext",
       "moduleResolution": "node",
       "strict": true,
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true,
       "outDir": "dist",
       "declaration": true
     },
     "include": ["src/**/*"]
   }

4. 运行 Rollup： 在 package.json 中添加 Rollup 构建脚本：

   {
     "scripts": {
       "build": "rollup -c"
     }
   }

   然后运行以下命令进行构建：

   npm run build

本题详细解读

1. 安装依赖

• rollup：Rollup 的核心库。
• @rollup/plugin-typescript：Rollup 的 TypeScript 插件，用于处理 TypeScript 文件。
• typescript：TypeScript 编译器。
• tslib：TypeScript 运行时库，用于支持一些 TypeScript 特性。

2. 配置 Rollup 配置文件

• input：指定入口文件，通常是 TypeScript 文件（.ts）。
• output：指定输出文件的路径和格式。
• plugins：使用 @rollup/plugin-typescript 插件来处理 TypeScript 文件。

3. 配置 TypeScript

• tsconfig.json：TypeScript 的配置文件，用于指定编译选项。
  • target：指定编译后的 JavaScript 版本。
  • module：指定模块系统。
  • strict：启用所有严格类型检查选项。
  • outDir：指定输出目录。
  • declaration：生成 .d.ts 类型声明文件。

4. 运行 Rollup

• package.json：通过 scripts 配置 Rollup 构建命令。
• npm run build：执行 Rollup 构建，生成最终的 JavaScript 文件。

通过以上步骤，你可以成功将 Rollup 与 TypeScript 集成，并利用 Rollup 打包 TypeScript 项目。