2016-08-11 3 views
1

これはちょっと止まっていますが、これはnode.jsのファイルのリンクを誤解しているためです。local.js関数をnode.jsにインポートする

Iは、以下の構造を有する:

./main_test.html 
./js_test.js 
./node_test.js 

main_test.htmlである:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</head> 
<body> 
<p id="p1"> 
</p> 
</body> 
</html> 

js_testはID p1<p>タグにテキストを印刷する機能を備えており、これである:

module.exports.print_to_p = function(){ 
$("#p1").text('This worked.'); 
}; 

私のノードスクリプトは、main_test.htmljs_test.jsから機能を実行します。

var http = require('http'), 
fs = require('fs'), 
$ = require('jQuery'), 
port = 1337, 
dep1 = require('./js_test.js'); 

dep1.print_to_p(); 

var app = http.createServer(function(request, response) { 
fs.readFile("main_test.html", function(error, data) { 
    if (error) console.log(error); 
    response.writeHead(200, { 
     'Content-Type': 'text/html' 
    }); 
    response.write(data); 
    response.end(); 
}); 
}).listen(port); 

それは私がjQueryのを参照するが、document.getElementById('p1').innerHTML = 'This worked';にこれを変更しないことによるものであったと仮定ReferenceError: $ is not definedがこれを解決していないと言います。

ノードアプリケーションでJavascript/JQueryを実行するにはどうすればよいですか?

答えて

1

問題は、あなたのhttp-requestがリンクされたファイルをすべてhtmlファイルとして解釈するため問題であるということです。 サーバーが同じコンテンツタイプを使用して異なるファイルタイプを処理できるようにする場合、依存関係は正しく配信されません。 expressまたはmime-typeなどのライブラリやパッケージを使用して修正するか、コンテンツタイプを個別に識別するのに役立ちます。また、依存ファイルのコンテンツタイプを識別してリクエストを調整することで手動で行うこともできます。あなたもここで読むべきファイルを指定する必要が

var http = require('http'), 
fs = require('fs'), 
port = 1337, 
path = require('path'); 

var app = http.createServer(function (request, response) { 
    var filePath = request.url; 
    var extension = path.extname(filePath); 
    var contentType = 'text/html'; // your default content-type 

    switch (extension) { 
     case '.js': 
      contentType = 'text/javascript'; 
      break; 

     ... // here you can specify the content-types you need 
    } 

    fs.readFile(filePath, function(error, data) { 
     if (error) console.log(error); 
     response.writeHead(200, { 
      'Content-Type': contentType 
     }); 
     response.write(data); 
     response.end(); 
    }); 
}).listen(port); 

注:

これを行うための例は次のようにあなたのnode_test.jsを修正するだろう! http-requestは、すべての依存ファイルに対して個別に呼び出されます。つまり、各ファイルを処理して読み込む必要があります。 正しいファイル拡張子を取得するには、pathというノードパッケージを使用できます。

0

ノードはサーバー言語であり、DOMへのアクセス権はありません。 HTMLサーバーとJSファイルをホストするノードサーバーを作成することはできますが、ノードでクライアントサイドのJSコードを実行することはできません。

あなたのコードは次のようになります。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js_test.js"></script> 
<script> print_to_p(); </script> 
</head> 
<body> 
<p id="p1"> 
</p> 
</body> 
</html> 

js_test.js

function print_to_p(){ 
$("#p1").text('This worked.'); 
}; 

node_test.js

var http = require('http'), 
fs = require('fs'), 
port = 1337, 

var app = http.createServer(function(request, response) { 
fs.readFile("main_test.html", function(error, data) { 
    if (error) console.log(error); 
    response.writeHead(200, { 
     'Content-Type': 'text/html' 
    }); 
    response.write(data); 
    response.end(); 
}); 
}).listen(port); 
0

はそれを動作させるためにnode_test.jsにこの行が必要になるか考えてみてください。

dep1.print_to_p(); 

関数のコードはjQueryの$変数を参照しているが、js_test.jsので、それはエラーにつながるものを定義していません。

$が定義されていても、それはHTMLページ自体を認識していないことを止めるでしょう。これは、サーバー上で実行されているNode.jsです。 "サーバーフレンドリーなjQuery"の実装を使用するとうまくいくでしょう。たとえば、cheerioです。または、そのJavaScriptコードをHTMLページ上で実行するように移動するとします。

あなたは近くにいるので、作業を続けてください。欠落しているリンクは、サーバー上で何が実行されているのか、ブラウザー上で何が実行されているのかを認識することです。

関連する問題