7

これが私が欲しいものです。

  • Express Web サーバーを使用したノード アプリケーション
  • サーバー、さらに重要なことにクライアントでのcoffeescriptの使用
  • クライアントで (そして最終的にはサーバーで) require.js を使用する

クライアントに coffeescript を接続するために私が見つけた推奨される方法は、connect-assetsを使用することです。これには、実際に coffeescript をコンパイルするために jade ヘルパーを使用する必要があるようです。

!=js('monalisa.js')

Monalisa.coffee をコンパイルし、正しい<script>タグを生成するようです。今度はrequire.jsを使いたいのですが、ここでつまずきます。jade ヘルパーを使用せずに connect-assets がすべてを正しくコンパイルするようにするにはどうすればよいですか?

これが私のかなり単純な 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'));
});
4

3 に答える 3

4

この問題の解決に役立つパッケージを作成しました。これはconnect-assets-jspathsと呼ばれます。

READMEから:

インストール

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

変更を監視して再コンパイルする

これで、いくつかの追加のコールバックを渡すことができ、接続アセットディレクトリの変更を監視します。

fileChangedCallback = (err, filePath) ->
    console.log "File Changed: #{filePath}"

jsPaths assets, console.log, fileChangedCallback, (err, watcher) ->
    console.log "Watcher initialized"

本番モードでは、これを無効にすることをお勧めします。

使用法を表示

exportPaths()このモジュールは、2つのグローバル関数とをエクスポートし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()
于 2012-12-01T17:19:50.743 に答える
2

ミモザを試してみてください。箱から出してすぐにこれらのことのそれぞれに役立ちます. http://www.mimosajs.com

mimosa new [name]すべてを含むスターター プロジェクトが提供されます。

于 2012-11-25T05:04:33.233 に答える
1

新しい答えで申し訳ありませんが、私はアカウントを作成することにしました。=)

mimosa newワークフローの一部としてExpressを選択した場合、Mimosaは小さなExpressアプリケーションを提供します。また、選択するCoffeeScriptと、CoffeeScriptでExpressアプリが提供されます。また、スキャフォールドアプリケーションにRequireJSが含まれます。したがって、何も書き直す必要はありません。プラグを差し込むだけです。Expressアプリが提供するものは、Mimosaを使用せずに自分で実行するための例として役立ちます。

于 2012-11-26T17:42:52.070 に答える