簡體   English   中英

NodeJS + CoffeeScript,根據請求渲染coffeescript編譯的js

[英]NodeJS + CoffeeScript, render coffeescript compiled js on request

我想要做的是添加以下內容給我已經運行coffeescript編寫的服務器

app.get '/test.js', (req, res) ->
    render coffee somecoffeefile.coffee

NodeJS,Express和Coffeescript可以實現這樣嗎?

謝謝!

何塞

好消息:這已經附帶Connect(因此Express,它擴展了Connect)作為一個插件! 它沒有詳細記錄; 事實上,在我被告知這樣的事情已經存在之前,我自己寫了類似的東西( connect-coffee )。

以下是使用Express進行設置的方法:

# Notice the following code is coffescript
# You must add the parens for the app.use method to use in js
coffeeDir = __dirname + '/coffee'
publicDir = __dirname + '/public'
app.use express.compiler(src: coffeeDir, dest: publicDir, enable: ['coffeescript'])
app.use express.static(publicDir)

現在,當,比如, http://yourapp/foo.js被要求,如果沒有這樣的文件在你的存在public目錄, foo.coffee會自動進行編譯,並將所得foo.js將送達。 請注意, compiler 之后設置static很重要。

更新:從Connect 1.7開始, compiler中間件已被刪除。 部分原因是,為了提供更多類似Rails 3.1的體驗,我創建了一個名為connect-assets的新中間件。 用npm安裝它,然后設置如下:

app.use require('connect-assets')(directory)

其中directory是CoffeeScript文件所在的文件夾(默認為assets )。 簡單吧? 嘗試一下,讓我知道你的想法。

CoffeeScript = require 'coffee-script'

app.get '/test.js', (req, res) ->
  render CoffeeScript.compile coffeeSourceCode

由於某種原因,編譯器不再工作,所以我這樣做:

fs = require 'fs'
coffee = require 'coffee-script'

app.use express.static "#{__dirname}/static"

app.get '/:script.js', (req, res) ->
  res.header 'Content-Type', 'application/x-javascript'
  cs = fs.readFileSync "#{__dirname}/coffee/#{req.params.script}.coffee", "ascii"
  js = coffee.compile cs 
  res.send js

現在你可以編寫coffee / animal.coffee代碼並在你的html中,做一個標准的腳本src ='/ animal.js'。 這隱藏了實現細節。 因為“/ coffee”目錄不作為靜態路徑暴露,所以無法訪問coffeescript。

筆記:

  1. 當然,這是一個CoffeeScript節點應用程序。 我假設如果您使用CS作為客戶端腳本,那么您也將它用於您的服務器!
  2. “靜態”行是可選的。 我的觀點是你可以愉快地在靜態目錄中保存“js”文件,例如像jquery.min.js這樣的庫文件。
  3. 像大多數Node / Express示例一樣,這有利於開發; 但是對於生產,您應該發送緩存標頭,壓縮它,理想情況下是某種形式的反向代理,以避免每次都讀取文件並進行編譯。

對於我們這些使用最新版Connect和Express的人,我剛剛發布了一個新模塊, npm install connect-coffee-script ,它可以動態編譯咖啡腳本文件。 提供了文檔和示例以及介紹文章

這是自述文件中的一個例子:

    var coffeescript = require('connect-coffee-script');
    var connect = require('connect');

    var app = connect();

    app.use(coffeescript({
        src: __dirname,
        dest: __dirname + '/public',
        bare: true
    }));

    app.use(connect.static(__dirname + '/public'));

    app.listen(3000)

如果你想使用一個偉大的現有插件我會推薦Trevor Burnham的Connect-Assets 它有助於編譯,縮小和連接.js和.coffee文件,並優化文件的提供方式(使用文件的md5-hash進行無效的遠期過期標頭)。 寫得很好的插件。

咖啡中間件正是我想要的 - 最小的設置,沒有生成的文件,而不是馬虎。 當它收到somescript.js的請求時,它會檢查是否有somescript.coffee 如果有,它將編譯並發送它。

安裝它:

npm install coffee-middleware

要使用,只需添加

app.use require('coffee-middleware') src: "#{__dirname}/your/web/root"

無論你用什么來提供靜態文件。

提供“公共”目錄中文件的簡單示例,在發送之前符合coffeescript,並執行彩色日志記錄:

app = require('express')()

app.use require('morgan') 'dev'
app.use require('coffee-middleware') src: "#{__dirname}/views"
app.use require('serve-static') "#{__dirname}/views"
app.listen 80

要使用上面的代碼:

mkdir coffeeServer
cd coffeeServer
npm install morgan coffee-middleware serve-static
npm install coffee-script -g

echo 'app = require("express")()
app.use require("morgan") "dev"
app.use require("coffee-middleware") src: "#{__dirname}/views"
app.use require("serve-static") "#{__dirname}/views"
app.listen 80' > server.coffee

coffee -c server.coffee
mkdir views
cd views
echo 'console.log "Hello world!"' > script.coffee
cd ..
node server.js

您可以將整個群集復制到終端中,它將設置並運行服務器。

去測試:

curl XXX.XXX.XXX.XXX/script.js

最后一點應吐出來

(function() {
  console.log("Hello world!");

}).call(this);

//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2NyaXB0LmpzIiwic291cmNlcyI6WyJzY3JpcHQuY29mZmVlIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUEsRUFBQSxPQUFPLENBQUMsR0FBUixDQUFZLGNBQVosQ0FBQSxDQUFBO0FBQUEifQ==NHS0076

祝好運!

我認為你應該編譯一次 COFFEE文件,特別是在生產模式下

如果您想使用Express 3或任何Web框架使用咖啡,請查看此repo ExpressOnSteroids您可以使用此解決方案,或者使用此項目中的Cakefile創建自己的解決方案

您可以使用Coffee4Clients通過快速服務器動態地將咖啡資產渲染為javascript。

更新:Coffee4Clients已被殺,有利於DocPad預編譯您的資產。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM