瀏覽器如何加載庫中的文件？

我構建了一個節點庫，用於加載位於lib內部的JSON文件，並使用從JSON加載的內容執行某些操作。瀏覽器如何加載庫中的文件？

所以LIB結構

lib/mylib.js 
data/data.json 
index.js

在 mylib.js

它這樣做;

var PATH = path.join(
    __dirname, 
    '../data/data.json' 
); 

function load() { 
    return JSON.parse(
     fs.readFileSync(
     PATH, 
     'utf8' 
     ) 
    ); 
    } 

module.exports = { load: load};

它在服務器端完美工作。我可以調用load函數並顯示json文件的內容。我的問題是如何在瀏覽器中工作。我很快在我的測試服務器上進行了測試，並且工作得很好。它在瀏覽器上打印了json文件的內容（使用chrome和safari）。

我在client.js

import mymodule from 'mylib/lib/mylib'; 

function MyObject({myobj, styles}) { 
    return (
    <Flex center> 
     <Spacing push={ {direction: 'ends', size: 'huge'} }> 
     <h1>{mymodule.load()}</h1> 
     </Spacing> 
    </Flex> 
);

此代碼，這個打印在瀏覽器的JSON內容。我不是100％確定這是如何工作的。當瀏覽器調用mymodule.load()時，它會在相對路徑../data/data.json中查找JSON文件。瀏覽器如何處理文件路徑？服務器是否將整個庫發送給瀏覽器，瀏覽器是否將它們存儲在某種臨時存儲中？

來源

2017-02-27 codereviewanskquestions

你使用像的WebPack /巴別塔或像這樣的任何構建工具？ – Nosyara

所以，一些事情。首先，在服務器端，如果JSON在應用程序的整個生命週期中是靜態的（即不重新啓動），那麼實際上可以做得比您擁有的更簡單。如果它一定會每個應用程序啓動一次被加載，你可以這樣做：

// in lib/mylib.js 
function load() { 
    return require('../data/data.json'); 
}

其實我與我的其他做要求，身體力行，而不是調用加載功能，但只是想如果您有足夠的理由這樣做，請將其留在該功能中。

在客戶端上，您將執行以下三件事之一。一，你可以設置數據文件夾，公衆，然後從客戶端Ajax請求調用它：

app.use(express.static('./data'));

兩個，你可以做你自己的它處理的明確路線，充分利用您MYLIB功能：

app.get('/data', function(req, res) { return res.send(myLib.load()); });

三，你可以使用一個構建工具喜歡的WebPack導入例如，使用數據文件JSON的裝載機：

https://github.com/webpack-contrib/json-loader

來源

2017-02-27 20:46:48 Paul

感謝您的回答..我應該如何解釋客戶端代碼在沒有這三種情況下工作？我可能會因爲使用自動生成的模板而缺少構建工具。 – codereviewanskquestions

從服務器獲取某些內容到瀏覽器中的唯一方法是將其發送到那裏。可以通過在JS中進行預編譯（這是webpack正在做的），也可以通過管道將其作爲web請求發送（這是我爲其他兩個人推薦的方法）。如果客戶端代碼正在工作，它正在執行以下三件事情中的一件，但您不知道它。看着你的客戶端代碼，我猜你正在使用react/redux，並且可能有一個babel或webpack模塊運行在某個地方，正在注入它。 – Paul

我明白了..我會研究webpack模塊..再次感謝 – codereviewanskquestions

瀏覽器如何加載庫中的文件？

回答

相關問題