Node.js - 外部のJSとCSSファイル（単にnode.jsを使用していません）

Question

私はnode.jsを学習しようとしていて、ちょっとしたロードブロックを打っています。

私の問題は、私は外部のCSSとjsファイルをhtmlファイルに読み込むことができなかったことです。

GET http://localhost:8080/css/style.css 404 (Not Found) 
GET http://localhost:8080/js/script.css 404 (Not Found) 

私は多少のウェブサーバがサービスを提供できるようにするために、以下のアプリの構造を模倣し、公開ディレクトリのルートを追加するように言われました（これはすべてのファイルは、アプリケーションのルートにいたときでした）外部ファイル。

私のアプリの構造は、だから私のwebserver.jsスクリプトは、アプリのルートにある、と私はアクセスしたいすべてが「国民にあるので

domain.com 
    app/ 
    webserver.js 

    public/ 
    chatclient.html 

    js/ 
     script.js 

    css/ 
     style.css 

のようなものです。

また、path.extname（）を使用してパスにあるファイル拡張子を取得するthis exampleも見ました。 （最後のコードブロックを参照）。

私は新しいサイト構造とこのpath.extname（）の例を組み合わせて、Webサーバーが私のpublic dir内のファイルにアクセスできるようにしました。したがって、外部ファイルを参照するhtmlファイルをレンダリングできますjsとcssファイル。

私のwebserver.jsはこのように見えます。公共のケース内部

var http = require('http') 
, url = require('url') 
, fs = require('fs') 
, path = require('path') 
, server; 

server = http.createServer(function(req,res){ 

    var myPath = url.parse(req.url).pathname; 

    switch(myPath){ 

     case '/public': 

     // get the extensions of the files inside this dir (.html, .js, .css) 
     var extname = mypath.extname(path); 

      switch (extname) { 

      // get the html 
      case '.html': 
       fs.readFile(__dirname + '/public/chatclient.html', function (err, data) { 
       if (err) return send404(res); 
       res.writeHead(200, {'Content-Type': 'text/html'}); 
       res.write(data, 'utf8'); 
       res.end(); 
       }); 
      break; 

      // get the script that /public/chatclient.html references 
      case '.js': 
       fs.readFile(__dirname + '/public/js/script.js', function (err, data) { 
       if (err) return send404(res); 
       res.writeHead(200, { 'Content-Type': 'text/javascript' }); 
       res.end(content, 'utf-8'); 
       res.end(); 
       }); 
      break; 

      // get the styles that /public/chatclient.html references 
      case '.css': 
       fs.readFile(__dirname + '/public/css/style.css', function (err, data) { 
       if (err) return send404(res); 
       res.writeHead(200, { 'Content-Type': 'text/javascript' }); 
       res.end(content, 'utf-8'); 
       res.end(); 
       }); 
      } 
      break; 

      default: send404(res); 
     } 
    }); 

、私は するvar EXTNAME = mypath.extname（パス）を経由して、このディレクトリ内のフォルダ/ファイルのいずれかを取得しようとしています。 私が提供したリンクに似ています。

しかし、現時点では、コンソールにログオンすると「extname」は空です。

誰かが私が追加する必要があるかもしれないとアドバイスすることができますかここでtweek？ これはExpressで簡単に行うことができますが、Nodeに依存するだけで同じことを達成する方法を知りたいと思います。

私はこれに関する助けに感謝します。

ありがとうございます。

Answer 1

コードにはいくつかの問題があります。

1. リスンするポートを指定していないため、サーバーは実行されません。
2. Ericが指摘したように、 'public'はURLに表示されないため、条件は失敗します。
3. あなたのjsおよびcssレスポンスに存在しない変数 'c​​ontent'を参照していますが、 'data'である必要があります。
4. あなたはcssのcontent-typeヘッダーはtext/javascriptの代わりにtext/cssにする必要があります
5. 本文に 'utf8'を指定する必要はありません。

私はあなたのコードを書き直しました。 注意case/switchは使用しません。私はもっ​​と単純な方が好きですし、そうでない場合は、それがあなたの好みであれば戻すことができます。 URLとパスモジュールは私の書き換えには必要ないので、削除しました。

var http = require('http'), 
    fs = require('fs'); 

http.createServer(function (req, res) { 

    if(req.url.indexOf('.html') != -1){ //req.url has the pathname, check if it conatins '.html' 

     fs.readFile(__dirname + '/public/chatclient.html', function (err, data) { 
     if (err) console.log(err); 
     res.writeHead(200, {'Content-Type': 'text/html'}); 
     res.write(data); 
     res.end(); 
     }); 

    } 

    if(req.url.indexOf('.js') != -1){ //req.url has the pathname, check if it conatins '.js' 

     fs.readFile(__dirname + '/public/js/script.js', function (err, data) { 
     if (err) console.log(err); 
     res.writeHead(200, {'Content-Type': 'text/javascript'}); 
     res.write(data); 
     res.end(); 
     }); 

    } 

    if(req.url.indexOf('.css') != -1){ //req.url has the pathname, check if it conatins '.css' 

     fs.readFile(__dirname + '/public/css/style.css', function (err, data) { 
     if (err) console.log(err); 
     res.writeHead(200, {'Content-Type': 'text/css'}); 
     res.write(data); 
     res.end(); 
     }); 

    } 

}).listen(1337, '127.0.0.1'); 
console.log('Server running at http://127.0.0.1:1337/'); 

Answer 2

publicクライアントが要求したURLには表示されないため、myPathのスイッチは常に無効になります。

あなたは自動的にルーティングする静的ファイルのための公開 'ディレクトリを設定することができ expressのようなサーバーフレームワークを使用してに見たいと思うかもしれません

Answer 3

は

var express = require('express'),app = express(); 
app.use(express.static(path.join(__dirname, 'public'))); 

ようなフレームワークの安価なオーバーヘッドは本当に努力の価値があるだろう効果的に「車輪を再発明する」

Answer 4

Connectで提供されるStaticミドルウェアを見ることができます。 Staticのソースコードを見ると、node.jsコードでこれを行う方法（既存のライブラリを使用せずにそれを行う方法を知りたい場合）が得られます。

Answer 5

// get the extensions of the files inside this dir (.html, .js, .css) 
    var extname = **mypath**.extname(path); 

これらは逆になっています。

var extension = path.extname(mypath); 

また、変数名には関数名を使用しないでください。回避することもできます。

Answer 6

自動更新のファイル、更新のための遅延の更新 フォーマット：app.js | index.htm | style.css

// packages 
const http = require('http'); 
const fs = require('fs'); 
// server properties 
const hostname = '127.0.0.1'; 
const port = 3000; 
const timer = 300; 

//should trigger atualize function every timer parameter 
let htmlfile = ''; 
let cssfile = ''; 
let jsfile = ''; 

uptodate(); 

// should read file from the disk for html 
function uptodate() 
{ 
    console.log(1); 
    fs.readFile('./index.html', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    htmlfile = html; 
    }); 
    // should read css from the disk for css 
    fs.readFile('./style.css', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    cssfile = html; 
    }); 

    // should read js file from the disk 
    fs.readFile('./app.js', function (err, html) { 
    if (err) { 
     throw err; 
    }  
    jsfile = html; 
    }); 
    setTimeout(function(){ uptodate(); }, 1000); 
} 
const server = http.createServer((req, res) => { 
    res.statusCode = 200; 

    // should send css and js 
    if(req.url.indexOf('.css') != -1){ //req.url has the pathname, check if it conatins '.js' 
    res.writeHead(200, {'Content-Type': 'text/css'}); 
    res.write(cssfile); 
    res.end(); 
    return; 
    } 
    if(req.url.indexOf('.js') != -1){ //req.url has the pathname, check if it conatins '.js' 
    res.writeHead(200, {'Content-Type': 'text/javascript'}); 
    res.write(jsfile); 
    res.end(); 
    return; 
    } 
    // should send html file via request 
    res.writeHeader(200, {"Content-Type": "text/html"}); 
    res.write(htmlfile); 
    res.end(); 
}); 

// should send css and js 

server.listen(port, hostname,() => { 
    console.log(`Server running at http://${hostname}:${port}/`); 
});