前端面试题130（请描述一次在TypeScript项目中处理构建系统（如Webpack或Rollup）的经验，以及是如何配置它们来支持TypeScript的）

使用Webpack配置TypeScript

Webpack是一个非常流行的模块打包器，它能够将JavaScript文件和其他资源（如CSS、图片等）打包成一个或多个bundle，以便于在浏览器或其他环境中使用。要使Webpack支持TypeScript，你需要安装一些额外的加载器和插件。

步骤如下：

1. 安装必要的依赖：
   首先，确保你的项目中已经安装了TypeScript。如果还没有，可以通过npm安装：

   npm install typescript --save-dev
   

   接着，安装Webpack及其CLI、以及ts-loader或awesome-typescript-loader来处理TypeScript文件：

   npm install webpack webpack-cli ts-loader --save-dev
   

2. 配置Webpack：
   在项目根目录下创建一个名为webpack.config.js的文件，并配置Webpack来处理TypeScript。以下是一个基本的配置示例：

   const path = require('path');
   
   module.exports = {
     entry: './src/index.ts', // TypeScript 入口文件
     module: {
       rules: [
         {
           test: /\.tsx?$/, // 匹配 .ts 和 .tsx 文件
           use: 'ts-loader', // 使用 ts-loader 转换 TypeScript
           exclude: /node_modules/, // 排除 node_modules 目录
         },
       ],
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js'], // 添加 .ts 和 .tsx 扩展名解析
     },
     output: {
       filename: 'bundle.js', // 输出文件名
       path: path.resolve(__dirname, 'dist'), // 输出路径
     },
   };
   

3. 修改package.json中的scripts：
   更新package.json，添加一个用于运行Webpack的脚本：

   "scripts": {
     "build": "webpack"
   }
   

4. 运行Webpack：
   现在你可以通过npm命令运行Webpack来打包你的TypeScript项目：

   npm run build
   

使用Rollup配置TypeScript

Rollup也是一个强大的模块打包器，它专注于保持代码的高效和最小化。与Webpack类似，配置Rollup来支持TypeScript也需要安装相应的插件。

步骤如下：

1. 安装必要依赖：
   除了TypeScript之外，还需要安装Rollup、@rollup/plugin-node-resolve、@rollup/plugin-commonjs以及rollup-plugin-typescript2：

   npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-typescript2 --save-dev
   

2. 配置Rollup：
   创建一个rollup.config.js文件，并配置Rollup来处理TypeScript。以下是一个简单的配置示例：

   import typescript from 'rollup-plugin-typescript2';
   import { nodeResolve } from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   
   export default {
     input: 'src/index.ts', // TypeScript 入口文件
     output: {
       file: 'dist/bundle.js', // 输出文件名
       format: 'iife', // 立即执行函数表达式格式，适合浏览器环境
     },
     plugins: [
       nodeResolve(), // 解析第三方模块
       commonjs(), // 转换CommonJS模块
       typescript(), // 处理TypeScript
     ],
   };
   

3. 修改package.json中的scripts：
   同样，更新package.json以包含一个运行Rollup的脚本：

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

4. 运行Rollup：
   使用npm命令启动打包过程：

   npm run build
   

以上就是使用Webpack和Rollup配置TypeScript的基本步骤。根据项目的具体需求，你可能还需要进一步配置，比如添加Babel来转译ES6+语法、处理CSS和图片资源等。