这就是我想要的。
- 使用快速网络服务器节点的应用
- 使用服务器上的CoffeeScript更重要的是客户端
- (在服务器上,并最终)在客户端上使用require.js
推荐的方法我已经能够找到挂钩CoffeeScript的客户端是使用连接资产 。 这似乎需要用玉佣工实际编译CoffeeScript的如。
!=js('monalisa.js')
看起来编译monalisa.coffee并生成正确<script>
标记。 现在我想用require.js这里我绊倒。 如何确保连接资产正确编译的一切,而不使用玉助手?
这是我相当简单app.js:
require('coffee-script');
var express = require('express')
, http = require('http')
, path = require('path')
, connectAssets = require('connect-assets');
var publicDir = path.join(__dirname, 'public');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use( connectAssets() );
app.use('/public', express.static(publicDir));
app.use(express.logger());
app.use(express.methodOverride());
app.use(app.router);
});
app.configure('development', function(){
app.use(express.errorHandler({
dumpExceptions: true,
showStack: true
}));
});
app.get('/', require('./routes').index);
app.get('/monalisa', require('./routes/monalisa').monalisa);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
我创建了一个包,以帮助解决这个问题; 这就是所谓的连接,资产jspaths 。
自述:
安装
npm install connect-assets-jspaths
服务器端应用
assets = require "connect-assets"
jsPaths = require "connect-assets-jspaths"
# Snip ...
app.use assets()
# Exports the global function exportPaths() and jsUrl(); see below in View Helpers.
jsPaths assets
# Optionally, pass a log function to see progress
# jsPaths assets, console.log
关注更改并重新编译
现在,你可以通过一些额外的回调,它会监视你的连接的资产目录更改。
fileChangedCallback = (err, filePath) ->
console.log "File Changed: #{filePath}"
jsPaths assets, console.log, fileChangedCallback, (err, watcher) ->
console.log "Watcher initialized"
注意您可能会想禁用此生产模式。
查看使用方法
该模块导出两个全局函数exportPaths()
和jsUrl()
// Using this in your view
!= exportPaths("jsPaths")
// Turns into this when rendered in production
<script type="text/javascript">
var jsPaths = { "main", "/builtAssets/js/main.13819282742.js" /* snip all the other file paths */ };
</script>
// Using this in your view
- var mainJsPath = jsUrl("/js/main.js")
script(type="text/javascript", data-main="#{mainJsPath}", src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.0.2/require.min.js")
// Turns into this when rendered in production
<script type="text/javascript" data-main="/builtAssets/js/main.13819282742.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.0.2/require.min.js"></script>
动态RequireJS路径
现在,我们有我们的requireJS一个变量,它友好的路径,我们可以设置在RequireJS配置这些路径
# Example main.coffee file in /assets/js folder
requirePaths =
paths:
jquery: "//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min"
underscore: "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min"
backbone: "//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min"
text: "/js/lib/text"
handlebars: "/js/lib/handlebars"
if jsPaths
for own key, value of jsPaths
# Fix up the lib references
key = key.slice 4 if key.slice(0, 4) == "lib/"
requirePaths.paths[key] = value
require.config
paths: requirePaths.paths
shim:
jquery:
exports: "$"
underscore:
exports: "_"
backbone:
deps: ["underscore", "jquery"]
exports: "Backbone"
require ['app'], (App) ->
new App().initialize()
尝试含羞草,它会帮助你的那些东西开箱的每一个。 http://www.mimosajs.com
mimosa new [name]
会给你所有它的启动项目。
很抱歉的新的答案,但我决定去做出一个帐户。 =)
如果您选择快递作为的一部分含羞草会给你一个小的Express应用程序mimosa new
的工作流程。 如果你选择CoffeeScript
它会给你在CoffeeScript中的快速应用。 它必须包含在脚手架应用RequireJS。 所以,你不应该需要重写任何东西。 你只需要插入你的东西。如果任何新快报应用它可以让你将作为一个例子,你自己做,而无需使用含羞草。