如何使用 @rollup/plugin-typescript 插件？

推荐答案

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

// www.javascriptcn.com code example
// rollup.config.js
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    typescript()
  ]
};

本题详细解读

安装依赖

首先，你需要安装 @rollup/plugin-typescript 插件以及 typescript 作为开发依赖。可以通过以下命令完成安装：

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

配置 Rollup

在 Rollup 配置文件中，你需要导入 @rollup/plugin-typescript 插件，并将其添加到 plugins 数组中。以下是一个简单的配置示例：

// www.javascriptcn.com code example
// rollup.config.js
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts', // 指定入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'cjs' // 输出格式
  },
  plugins: [
    typescript() // 使用 TypeScript 插件
  ]
};

插件选项

@rollup/plugin-typescript 插件支持多种配置选项，可以通过传递一个配置对象来自定义行为。例如：

typescript({
  tsconfig: './tsconfig.json', // 指定 tsconfig 文件路径
  include: ['src/**/*.ts'], // 包含的文件
  exclude: ['node_modules/**'] // 排除的文件
})

运行 Rollup

配置完成后，你可以通过以下命令运行 Rollup 进行打包：

npx rollup -c

这将根据你的配置文件和 TypeScript 插件生成最终的打包文件。