如何用coffeescript和requirejs使用Node和Express? [英] How do I use Node and Express with coffeescript and requirejs?

查看:171
本文介绍了如何用coffeescript和requirejs使用Node和Express?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我想要的。


  • 使用express webserver的节点应用程序

  • 使用coffeescript在服务器上,更重要的是客户端

  • 在客户端(最终在服务器上)使用require.js

我可以找到为客户端挂载咖啡书的推荐方法是使用连接 - 资产的。这似乎需要使用翡翠助手实际编译coffeescript例如。

The recommended way I've been able to find of hooking up coffeescript for the client is to use connect-assets. This seems to require using jade helpers to actually compile coffeescript eg.

!=js('monalisa.js')

似乎编译monalisa.coffee并生成正确的< script> 标签。现在我想使用require.js,这里我绊倒了。如何确保连接资产可以正确编译一切,而无需使用翡翠助手?

seems to compile monalisa.coffee and generate the correct <script> tag. Now I want to use require.js and here I stumble. How do I ensure that connect-assets compiles everything correctly without using the jade helpers?

这是我相当简单的app.js:

Here's my fairly simple 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'));
});


推荐答案

我已经创建了一个软件包来帮助解决这个问题;它被称为 connection-assets-jspaths

I've created a package to help solve this problem; it's called connect-assets-jspaths.

从自述文件中:

npm install connect-assets -jspaths


  • 请注意,对CoffeeScript有依赖关系。



    • 服务器端使用情况



    • Note, there is a dependency on 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
    



    观看更改并重新编译



    现在,您可以传递一些额外的回调,并监视连接资产

    Watch changes and re-compile

    Now you can pass some additional callbacks in and it will monitor your connect assets directories for changes.

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

    注意

    此模块导出两个全局函数 exportPaths() jsUrl()

    This module exports two global functions exportPaths() and 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配置

    Dynamic RequireJS Paths

    Now that we have a variable with our requireJS friendly paths in it, we can set those paths in the RequireJS config

    # 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()
    

    这篇关于如何用coffeescript和requirejs使用Node和Express?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆