CoffeeScript系列教程（二）—安装和使用

最新推荐文章于 2024-11-06 02:02:32 发布

绿叶清风

最新推荐文章于 2024-11-06 02:02:32 发布

阅读量5.3k

点赞数

分类专栏： CoffeeScript

本文链接：https://blog.youkuaiyun.com/PZ0605/article/details/52524686

版权

CoffeeScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种编译到JavaScript的语言CoffeeScript，详细说明了如何安装CoffeeScript编译器，并通过npm命令实现安装过程。此外，还介绍了如何创建并运行CoffeeScript文件，包括编译为JavaScript代码的方法及常用命令。最后，推荐了一个强大的前端开发工具Webstorm，以及如何配置它来自动编译CoffeeScript文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CoffeeScript是一门编译到JavaScript的语言，肯定需要一个编译器的。实际上CoffeeScript编译器也是用CoffeeScript编写的（自己编译自己？感觉好屌的样子！）。你可以通过npm命令安装：

npm install -g coffee-script

npm是啥？额，如果你对nodejs一点都不了解的话，建议你搜索下，作为一个前端开发，nodejs都不知道的话，那就out！后端开发不知道nodejs那你就不是一个好后端啊。顺便提一句，学习就是不断接触陌生内容的过程，要善于利用搜索引擎！安装后就可以编写我们的第一个程序了！想想好激动啊

使用

新建一个demo.coffee，CoffeeScript的文件都是以.coffee结尾。
在控制台打印Hello World

那么我们怎么把这句话编译到JavaScript呢？打开控制台,进入到demo.coffee的目录，输入如下命令

coffee -c demo.coffee

这时就会在demo.coffee的同目录下生成demo.js,内容如下

CoffeeScript系列教程（二）—安装和使用

// Generated by CoffeeScript 1.9.0
(function() {
  console.log('Hello World!');

}).call(this);

执行：

node demo

大家就可以在命令行看到Hello World!

编译后内容被一个匿名函数包裹了，这里可以避免全局变量的泛滥（多么友好啊）。编译的相关命令很多，如下（选自官网）

-c  编译一个 .coffee 脚本到一个同名的 .js 文件

-m  随 JavaScript 文件一起生成 source maps. 并且在 JavaScript 里加上sourceMappingURL指令

-i  启动一个交互式的 CoffeeScript 会话用来尝试一些代码片段. 等同于执行 coffee 而不加参数

-o  将所有编译后的 JavaScript 文件写到指定文件夹. 与 --compile 或 --watch 搭配使用

-j  编译之前, 按参数传入顺序连接所有脚本到一起, 编译后写到指定的文件. 对于编译大型项目有用

-w  监视文件改变, 任何文件更新时重新执行命令

-p  直接打印到 stdout 而不是写到一个文件

-s  将CoffeeScript 传递到 STDIN 后从STDOUT 获取 JavaScript. 对其他语言写的进程有好处. 比如:cat src/cake.coffee | coffee -sc

-l  将代码作为 Literate CoffeeScript 解析. 只会在从 stdio 直接传入代码或者处理某些没有后缀的文件名需要写明这点

-e  直接从命令行编译和打印一小段 CoffeeScript. 比如:coffee -e "console.log num for num in [10..1]"

-b  编译到 JavaScript 时去掉顶层函数的包裹

-t  不对 CoffeeScript 进行解析, 仅仅进行 lex, 打印出 token stream: [IDENTIFIER square][ASSIGN =] [PARAM_START (] ...

-n  不对 CoffeeScript 进行编译, 仅仅 lex 和解析, 打印 parse tree:
    Expressions
      Assign
        Value "square"
        Code "x"
          Op *
            Value "x"
            Value "x"

IDE

工欲善其事，必先利其器

一个好的开发工具可以帮我们节省大量的时间，如果我们采用如上的方式编译，得活活把人累死，每写完一个小功能得编译一次，出错了还得编译。向大家推荐一款前端开发利器Webstorm，想了解更多，赶紧百度去。
CoffeeScript系列教程（二）—安装和使用
Webstorm有个file watchers的功能，当你coffee文件有改动，自动帮你编译成js文件。

如何添加FILE WATCHERS

打开设置页面
点击右上角绿色的添加按钮，选择coffeescript

Arguments参数里面就是编译的参数，我们改成如下内容，然后一路确定：

–bare –compile $FileName$

随便改动demo.coffee,demo.js会相应变动。而且编译后的JavaScript就不会被匿名函数的包裹（之前我们设置的Arguments）。Wbestorm的功能不仅如此，真是谁用谁知道啊！