Rails 7+esbuild环境下如何在Svelte中正确集成CoffeeScript

报错本质是Svelte内嵌脚本的预处理链路没有生效：

1. 单独启用esbuild-coffeescript时，该插件仅会处理后缀为.coffee的独立文件，无法解析.svelte文件内部<script lang="coffee">包裹的代码块
2. 给esbuild-svelte传入svelte-preprocess配置时，大概率存在配置层级写错、漏装核心依赖、预处理器未显式注册CoffeeScript支持三类问题，导致CoffeeScript代码没有提前转成标准JavaScript，就被Svelte内置的JS解析器读取，直接抛出Unexpected token语法错误
3. Rails 7默认的jsbundling构建脚本如果没替换，自定义esbuild配置根本不会被加载，所有插件配置都不生效。

1. 补全/对齐依赖版本 #

先执行下面的命令安装/修正依赖，注意必须单独安装coffeescript核心包——svelte-preprocess不会自带该依赖，漏装会导致预处理器静默失败：

yarn add esbuild@^0.17.0 esbuild-svelte@^0.7.3 svelte@^3.58.0 svelte-preprocess@^5.0.4 coffeescript@^2.7.0 esbuild-coffeescript@^2.2.0

2. 修正esbuild.config.js配置 #

注意两个核心规则：独立.coffee文件交给esbuild-coffeescript处理，.svelte内部的CoffeeScript全交给svelte-preprocess处理；preprocess是esbuild-svelte的一级配置项，不要嵌套到compileOptions里。

const esbuild = require('esbuild')
const sveltePlugin = require('esbuild-svelte')
const sveltePreprocess = require('svelte-preprocess')
const coffeePlugin = require('esbuild-coffeescript')

const isWatch = process.argv.includes('--watch')
const isDev = process.env.RAILS_ENV === 'development'

esbuild.build({
  entryPoints: ['app/javascript/application.js'],
  bundle: true,
  sourcemap: isDev,
  outdir: 'app/assets/builds',
  watch: isWatch,
  // Rails环境下必须加，避免解析node_modules里的svelte组件时报错
  mainFields: ['svelte', 'browser', 'module', 'main'],
  plugins: [
    coffeePlugin({
      bare: true
    }),
    sveltePlugin({
      // 注意：preprocess是一级配置，不要写到compileOptions内部
      preprocess: sveltePreprocess({
        // 显式声明coffeescript支持，不要依赖自动探测
        coffeescript: {
          bare: true,
          sourceMap: isDev
        }
      }),
      compileOptions: {
        dev: isDev,
        css: true
      }
    })
  ]
}).catch(() => process.exit(1))

3. 替换Rails默认构建脚本 #

打开package.json，把默认的build脚本替换成自定义配置的启动命令，避免Rails默认的esbuild参数覆盖你的配置：

{
  "scripts": {
    "build": "node esbuild.config.js"
  }
}

4. Svelte组件写法校验 #

<script>标签的lang属性必须写coffee，不要写全称coffeescript，否则预处理器无法识别。可参考最小可用示例：

<script lang="coffee">
  export let title = "Rails 7 + Svelte + CoffeeScript"
  clickCount = 0
  handleClick = -> clickCount += 1
</script>

<div class="svelte-component">
  <h2>{title}</h2>
  <button on:click={handleClick}>点击计数：{clickCount}</button>
</div>

如果按上面配置后仍报错，逐项核对：

• 确认没有给esbuild-svelte传入多个CoffeeScript相关的预处理器，避免预处理顺序冲突
• 确认node_modules里没有多版本共存的svelte、esbuild-svelte，版本冲突会导致preprocess钩子不触发
• 确认.svelte文件没有被其他esbuild插件提前处理，esbuild-svelte必须放在所有处理类脚本插件的最靠后位置（仅在coffeePlugin之后即可）
• 构建时执行yarn build --watch前，先删除app/assets/builds目录下的旧构建缓存文件，避免旧文件干扰

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