如何在index.html中引入CoffeeScript？Brackets为何不识别其类型？

一、在index.html中引入CoffeeScript的两种方案 #

1. 浏览器端实时编译（仅适合开发调试） #

浏览器原生不支持CoffeeScript语法，所以得先引入CoffeeScript编译器脚本，它会自动处理页面里type="text/coffeescript"的标签。操作步骤如下：

• 先通过npm全局安装CoffeeScript：

  npm install -g coffeescript
  

• 找到安装目录下的lib/coffee-script.min.js文件，复制到你的项目目录中
• 在index.html里引入这个本地编译器文件，再编写CoffeeScript代码

示例代码：

<!-- 引入本地的CoffeeScript编译器 -->
<script src="./lib/coffee-script.min.js"></script>

<!-- 编写你的CoffeeScript代码 -->
<script type="text/coffeescript">
  greet = (name) ->
    console.log "Hello, #{name}!"
  greet "CoffeeScript"
</script>

⚠️ 注意：这种方式别用到生产环境，浏览器实时编译会拖慢页面加载速度，影响用户体验。

2. 预编译为JavaScript（推荐生产环境使用） #

更高效的方式是提前把CoffeeScript转成标准JS，再像普通JS文件一样引入：

• 同样先通过npm安装CoffeeScript（全局或项目本地都可以）
• 针对你的.coffee文件执行编译命令：

  coffee -c your-script.coffee
  

  执行后会生成对应的your-script.js文件
• 最后在index.html中引入编译好的JS文件：

  <script src="./your-script.js"></script>
  

二、为什么Brackets编辑器无法识别text/coffeescript类型？ #

Brackets默认只支持标准的JavaScript相关MIME类型（比如text/javascript、text/ecmascript），text/coffeescript属于自定义的非标准MIME类型，编辑器没有内置对它的语法高亮和识别逻辑。

如果想让Brackets支持这个类型，你可以安装对应的扩展插件：

• 打开Brackets的扩展管理器（点击右上角的扩展图标）
• 搜索“CoffeeScript”，选择口碑较好的插件（比如官方的“Brackets CoffeeScript”）
• 安装完成后，Brackets就能对text/coffeescript标签内的代码进行语法高亮，并且正常识别该类型了。

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