用 SeaJS 玩转 CoffeeScript 和 LESS

CoffeeScript 是一门可以编译成 JavaScript 的语言，语法轻巧优雅，社区非常活跃，是目前玩家最多、最有可能将 JavaScript 变成编译目标语言的新语言。可参考：JavaScript 的死与生

LESS 是一门可以编译成 CSS 的动态样式语言。CSS 设计之初是给设计师用的，是一门语法非常简洁优雅的声明式语言。但随着应用场景的复杂化，越来越多的 CSS 工作已经交由专业程序员来负责。在这种大背景下，LESS 等动态样式语言应运而生，为 CSS 的编写提供了变量、混合、计算和函数等功能。

目前 CoffeeScript 和 LESS 在 NodeJS 端有良好的开发体验，但在浏览器端的开发方式并不是很舒适。通过 SeaJS 的插件，可以让你在浏览器端的开发体验得到很大提升。

例子：CoffeeScript and LESS in SeaJS

中文文档：CoffeeScript 插件, LESS 插件

结合 SeaJS 的 map 功能，还可快速实现跨域调试，可参考 文本插件 的说明。

欢迎使用，欢迎交流反馈。

评论

3 楼 hizhengfu 2011-10-28  

lifesinger 写道

这个是用来重新定位 base 的，和 require 解析 id 的逻辑关系不是很大。。。。。。

谢谢玉伯回复。看了文档，不清楚的地方也看了代码，上述意思是明白的。因为实际部署的时候文件夹一般都是在seajs外部的，估计更可能的是
   libs┬jquery/1.6.4/
       ├json/
       ├seajs/
这样的方式存放模块。如果没有引入seajs版本号的话那么base就是http://test.com/libs/seajs/了，这时候要require其它js的话地址写起来还比较麻烦。否则就要放在seajs文件夹下面。如果写版本号的话，如果引入seajs比较分散的话，修改也比较麻烦，当然这是不引入自动工具的前提下。如果去掉正则数字验证部分，那么base地址就是http://test.com/libs/这时候require就不用考虑路径问题了直接就是require('jquery/1.6.4/jquery');此时从你修改好的模块中下载下来的文件就可以直接使用了。所以建议这么修改。

2 楼 lifesinger 2011-10-28  

这个是用来重新定位 base 的，和 require 解析 id 的逻辑关系不是很大

modules 项目中，在 #jquery/1.6.4/jquery 前面的 #, 是表示该 id 不需要parse  alias

一般，我们需要会在项目中配置：

seajs.config({
  alias: {
    jquery: 'jquery/1.6.4/jquery'
  }
]);

如果在 jquery.js 中写成 define('jquery/1.6.4/jquery', ...)

其实上会被解析成：jquery/1.6.4/jquery/1.6.4/jquery
这样就不对了

因此给 id 添加了 # 约定，凡是以 # 开头的 id，表示不需要解析 alias
这和添加后缀的规则是一致的，require('./a') 默认情况下，会自动添加 .js 后缀，等同 require('./a.js')
如果写上  require('./a#') 的话，就不会添加默认后缀

＃ 在 seajs 里表示“停止”，表示不需要进行多余操作，理解了就很容易把握了

^o^

1 楼 hizhengfu 2011-10-28  

借个地方留言了。代码中

    // When src is "http://test.com/libs/seajs/1.0.0/sea.js", redirect base
    // to "http://test.com/libs/"
    var match = base.match(/^(.+\/)seajs\/[\d\.]+\/$/);

中match改为var match = base.match(/^(.+\/)seajs\/$/);是不是更好。这样以后如果
js文件夹-seajs
  -jquery
  -json
直接require('jquery/1.6.4/jquery-debug')这样就可以引入脚本了。而且目前模块化的代码中 define('#jquery/1.6.4/jquery-debug', [], factory);这样的也就不用修改了，这样改应该没有其它副总用吧。