如何使用Node和Express与coffeescript和requirejs?

这是我想要的。

  • 使用快速Web服务器的节点应用程序
  • 在服务器上使用coffeescript,更重要的是使用客户端
  • 在客户端(最终在服务器上)使用require.js

我已经能够find为客户端连接 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')); }); 

我已经创build了一个包来帮助解决这个问题。 它被称为connect-assets-jspaths 。

自述文件:

安装

npm install connect-assets-jspaths

  • 请注意,CoffeeScript存在依赖关系。

服务器端使用

 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 

观察变化并重新编译

现在你可以传入一些额外的callback,它将监视你的连接资产目录的变化。

 fileChangedCallback = (err, filePath) -> console.log "File Changed: #{filePath}" jsPaths assets, console.log, fileChangedCallback, (err, watcher) -> console.log "Watcher initialized" 

注意您可能想要在生产模式中禁用此function。

查看用法

该模块导出两个全局函数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> 

dynamicRequireJSpath

现在我们有一个带有requireJS友好path的variables,我们可以在RequireJSconfiguration中设置这些path

 # 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]将给你一个启动项目的所有。

对不起,新的答案,但我决定去做一个帐户。 =)

如果您selectExpress作为mimosa new工作stream程的一部分, mimosa new会给你一个小型快递应用程序。 如果您selectCoffeeScript它会在CoffeeScript中为您提供一个Express应用程序。 它将包含在脚手架应用程序中的RequireJS。 所以你不需要重写任何东西。 你只需要插入你的东西。如果有什么快递应用程序给你将作为一个例子,让你自己做,而不使用含羞草。