エクスプレスサーバーの依存関係の解決

Question

エクスプレスサーバーの依存関係を解決する際に問題が発生しています。ここで

は私のプロジェクトの構造は、ここで

Calculator 
--dist 
----app 
-------calculator.js 
-------server.js 
--node_modules 
--src 
----app 
--------calculator.js 
--------server.js 
----public 
--------calculator.css 
--------calculator.html 
----.babelrc 
----.gitignore 
----package.json 

である私のserver.jsコードは、私がES6から私のJSをコンパイルしていますので、私はdistのフォルダとsrcフォルダを持っている理由がある

const express = require('express'); 
const app = express(); 
const path = require('path'); 

app.get('/', (req, res) => { 
    res.sendFile(path.resolve('./src/public/calculator.html')); 
}); 

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

app.listen(3000,() => { 
    console.log(__dirname); 
    console.log("Listening on port 3000"); 
}); 

ですsrcフォルダからBabelを使ってappフォルダ内のES5に移動します。

ただし、ノードサーバーを起動すると、自分のhtmlでCSSファイルとJSファイルをロードできません。私は、ファイルがローカルホスト上で提供しています方法について何かをしないのです確信しているcalculator.htmlファイル

<link rel="stylesheet" type="text/css" href="./calculator.css"> 
<script type="text/javascript" src="./calculator.js"></script> 

からそれぞれをロードするためにこれらのパスを使用しています。エラーが指摘されていることを感謝します。

Answer 1

さてさて、これは私のために働きました正確に。

私は、次の

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

マイ__dirnameがCalculator/dist/appがそうこれにsrcがHTMLファイルにCSSやJSの属性変更されることが示されたが、

<link rel="stylesheet" type="text/css" href="./calculator.css"> 
<script type="text/javascript" src="./calculator.js"></script> 

を働いたと私の急行静的ファイル配信を設定します

/src/publicフォルダを見るために私の明示的な静的フォルダを設定し、私の現在のディレクトリが/dist/appフォルダだったので、私はJSファイルを直接提供することができましたROM？

Answer 2

それはserver.jsに9行に次のようになります。

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

あなたがしようとし、その後appに戻って、戻ってダウンsrcに、根まで、srcまでappフォルダから行く、としていますpublicに移動します。しかし、あなたのプロジェクト構造図では、publicはappの内部ではなく、その横にあります。 app.use(express.static(__dirname + '../public'));のようなものがほしいと思っています。また、ノードに組み込まれているpathモジュールを使用することをお勧めします。それはあなたがパスの作成に間違いがないことを確認します。

編集：申し訳ありませんが、間違っていました。私は、あなたがあなたのサーバーコードをも見渡しているのを見ていませんでした。あなたは、両方の問題を解決する必要があり、これらの行を、使用したいと思う：

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

これは、あなたがserver.jsファイルdist/appに存在していないsrc/app内の1つの実行を前提としています。

Answer 3

...

app.use（express.staticを（__ dirnameの+ '/./src/app/public'））次のいずれか試してみてください。

app.use（ '/'、express.static（__ DIRNAME} + '/./src/app/public'））; // __dirnameには最後のスラッシュが含まれていないと思いますか？

最初は常にあなたの静的なディレクトリになります、2番目は「/」と以下のためにあなたの静的なディレクトリになります。詳細については、https://expressjs.com/en/4x/api.html#app.useを参照してください。私は、なぜ100％はわからないが、

そして...

のsrc属性があること「/calculator.css」しますので、あなたのHTMLを変更するなど