执行npm run build遇rpt2插件错误：意外字符'�'

这个错误是因为rpt2（Rollup的TypeScript编译插件）仅能处理JS/TS代码，当项目中引入图片、CSS、字体这类非JS/TS格式文件时，插件无法识别就会抛出这个乱码字符错误。下面是具体解决方法：

1. 定位问题文件 #

先检查项目代码里有没有导入非JS/TS资源，比如：

import avatar from './assets/avatar.png';
import './styles/global.css';

这类导入就是报错的根源。

2. 添加对应Rollup插件处理非JS资源 #

根据你引入的文件类型，安装并配置对应的Rollup插件：

• 处理图片、图标等二进制文件：使用@rollup/plugin-image或rollup-plugin-url
• 处理CSS文件：使用rollup-plugin-postcss或@rollup/plugin-css-only

配置示例（以处理图片和CSS为例） #

先安装依赖：

npm install rollup-plugin-postcss @rollup/plugin-image --save-dev

修改rollup.config.js，把新插件加入plugins数组（注意顺序：资源处理插件要放在TS插件前面）：

import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';

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

3. 添加类型声明（TypeScript项目必做） #

在项目里新建类型声明文件（比如src/types.d.ts），给非JS/TS资源添加类型定义，避免TS编译报错：

// 图片类型声明
declare module '*.png' {
  const value: string;
  export default value;
}

declare module '*.jpg' {
  const value: string;
  export default value;
}

// CSS类型声明
declare module '*.css' {
  const content: Record<string, string>;
  export default content;
}

4. 清理缓存后重新构建 #

执行以下命令清理Rollup缓存，再重新构建：

rm -rf node_modules/.cache
npm run build

内容的提问来源于stack exchange，提问作者Satendra Raghav