面试题：Svelte项目构建工具Rollup的基础配置

Question

在Svelte项目中，Rollup是常用的构建工具。请描述一下如何配置Rollup来打包Svelte组件，包括处理Svelte文件、导入CSS以及生成适用于浏览器的输出文件等基本配置步骤。

Answer 1

1. 安装依赖： 确保项目中安装了rollup、@rollup/plugin-node-resolve、@rollup/plugin-commonjs和svelte - preprocess。

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

2. 创建Rollup配置文件： 在项目根目录创建rollup.config.js文件。
3. 配置Rollup：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import sveltePreprocess from'svelte-preprocess';

export default {
  input: 'path/to/your/main.svelte', // 入口文件路径
  output: {
    file: 'public/build/bundle.js', // 输出文件路径
    format: 'iife', // 输出格式，iife适用于浏览器
    name: 'MyApp', // 全局变量名（仅在iife格式下有用）
    sourcemap: true // 生成sourcemap
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess()
    }),
    resolve({
      browser: true
    }),
    commonjs()
  ]
};

4. 处理Svelte文件： rollup - plugin - svelte插件用于处理.svelte文件，sveltePreprocess插件可以处理Svelte文件中的预处理，如TypeScript、SCSS等。
5. 导入CSS： rollup - plugin - svelte会自动处理Svelte组件内导入的CSS，并将其提取到单独的CSS文件中（若配置了相应插件），或者注入到输出的JavaScript文件中。
6. 生成适用于浏览器的输出文件： 通过设置output.format为iife，生成的JavaScript文件可以直接在浏览器中使用。name属性定义了全局变量名（在iife格式下），sourcemap为true方便调试。

在项目脚本中添加打包命令，如在package.json的scripts字段中添加：

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

然后运行npm run build即可进行打包。