CoffeeScript系列教程(二)—安装和使用


安装

CoffeeScript是一门编译到JavaScript的语言,肯定需要一个编译器的。实际上CoffeeScript编译器也是用CoffeeScript编写的(自己编译自己?感觉好屌的样子!)。你可以通过npm命令安装:

npm install -g coffee-script

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

使用

新建一个demo.coffee,CoffeeScript的文件都是以.coffee结尾。
在控制台打印Hello World!
CoffeeScript系列教程(二)—安装和使用

console.log '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文件。
CoffeeScript系列教程(二)—安装和使用

如何添加file watchers

  1. 打开设置页面
    CoffeeScript系列教程(二)—安装和使用

    CoffeeScript系列教程(二)—安装和使用

  2. 点击右上角绿色的添加按钮,选择coffeescript
    CoffeeScript系列教程(二)—安装和使用

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

    –bare –compile $FileName$

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

有任何问题,欢迎大家批评指出,我们共同进步。


7 responses on “CoffeeScript系列教程(二)—安装和使用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>