vue 3.3 不再支持自定义脚本语言（例如 coffeescript）？

Question

更新： 我创建了一个 repo 来轻松复制错误：https://github.com/Boux/vite-coffee-bug

git clone https://github.com/Boux/vite-coffee-bug.git
cd vite-coffee-bug
npm install
npm run build

---

我在一个简单的项目中使用 vitejs + vue，我试图用 coffeescript 作为脚本语言来设置它，就像我过去很容易做到的那样，但是当使用 vue 3.3 或更高版本时它似乎崩溃了但它工作正常在 vue 3.2.

中

在我的

vite.config.js

中，我只使用了 2 个插件：

@vitejs/plugin-vue

（版本 4.2.3）和一个自定义插件，它只是将 coffeescript 代码编译成 javascript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import CoffeeScript from "coffeescript"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'coffee_compile',
      transform: function(src, id) {

        // compile coffee files to js
        if (/\.coffee$/.test(id)) {
          var {js, sourceMap} = CoffeeScript.compile(src, { sourceMap: true })
          return { code: js, map: sourceMap }
        }

      }
    }
  ],
})

在我的项目中我有

src/App.vue

：

<script lang='coffee'>
import { ref } from 'vue'

export default
  data: -> { count: ref(0) }
</script>

<template>
  <div>
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

<style scoped>

</style>

当我使用 vue 3.2 时，

@vitejs/plugin-vue

使用我假设的

@vue/compiler-sfc

给我这样的东西：

import _sfc_main from "/Users/boux/repo/vite_coffee_bug/src/App.vue?vue&type=script&lang.coffee"
export * from "/Users/boux/repo/vite_coffee_bug/src/App.vue?vue&type=script&lang.coffee"
import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

function _sfc_render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", null, [
    _createElementVNode("button", {
      type: "button",
      onClick: _cache[0] || (_cache[0] = $event => (_ctx.count++))
    }, "count is " + _toDisplayString(_ctx.count), 1)
  ]))
}


import _export_sfc from 'plugin-vue:export-helper'
export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]])

它在第一行再次导入 App.vue 的地方，但只有脚本标签，它指定它是

lang.coffee

所以我可以得到它并在下一个插件中编译它，如果我正在使用它，它可以完美地工作视图 3.2.

在 vue 3.3 中，当

@vitejs/plugin-vue

调用

@vue/compiler-sfc

时，它只是因语法错误而崩溃，就像它试图用 coffeescript 代码做一些事情，就好像它是 javascript 而不是像在 vue 中那样从 coffeescript 导入和编译它3.2:

error during build:
SyntaxError: [vue/compiler-sfc] Missing semicolon. (5:6)

/Users/boux/repo/vite_coffee_bug/src/App.vue
3  |  
4  |  export default
5  |    data: -> { count: ref(0) }
   |        ^
6  |  </script>
7  |  
    at instantiate (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:653:32)
    at constructor (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:946:12)
    at Parser.raise (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:3270:19)
    at Parser.semicolon (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:3637:10)
    at Parser.parseExportDefaultExpression (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:13759:10)
    at Parser.parseExport (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:13663:25)
    at Parser.parseStatementContent (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:12661:27)
    at Parser.parseStatementLike (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:12549:17)
    at Parser.parseModuleItem (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:12526:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:13121:36)
    at Parser.parseBlockBody (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:13114:10)
    at Parser.parseProgram (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:12437:10)
    at Parser.parseTopLevel (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:12427:25)
    at Parser.parse (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:14245:10)
    at Object.parse (/Users/boux/repo/vite_coffee_bug/node_modules/@babel/parser/lib/index.js:14286:38)
    at parse (/Users/boux/repo/vite_coffee_bug/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15811:25)
    at new ScriptCompileContext (/Users/boux/repo/vite_coffee_bug/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15827:43)
    at Object.compileScript (/Users/boux/repo/vite_coffee_bug/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19766:15)
    at resolveScript (file:///Users/boux/repo/vite_coffee_bug/node_modules/@vitejs/plugin-vue/dist/index.mjs:285:31)
    at genScriptCode (file:///Users/boux/repo/vite_coffee_bug/node_modules/@vitejs/plugin-vue/dist/index.mjs:2471:18)
    at transformMain (file:///Users/boux/repo/vite_coffee_bug/node_modules/@vitejs/plugin-vue/dist/index.mjs:2284:54)
    at Object.transform (file:///Users/boux/repo/vite_coffee_bug/node_modules/@vitejs/plugin-vue/dist/index.mjs:2796:16)
    at file:///Users/boux/repo/vite_coffee_bug/node_modules/rollup/dist/es/shared/node-entry.js:24551:40

我不确定这是否是

@vitejs/plugin-vue

中的错误，因为 vue 3.3 刚刚发布，或者我是否缺少插件的一些配置选项。

在 vue 3.3 帖子中：https://blog.vuejs.org/posts/vue-3-3#script-setup-typescript-dx-improvements，他们确实讨论了对编译器的更改，所以我我想我应该可以选择跳过那一步，因为我没有使用打字稿