咕嘟咕嘟+ JS庫+ JSON數據

我有一個單頁web應用，爲此我使用各種外部JS文件：通過不發貨的bower包（bower 咕嘟咕嘟+ JS庫+ JSON數據

其他庫中找到

庫即其他一些JS腳本我有本地）
有一些數據的JSON文件
我main.js文件，集成了所有的JS代碼

現在，我試圖圍繞構建和發佈此類應用程序的JS組件的最佳方式進行討論。

通常我會通過index.html中的<script></script>標籤調用這樣的文件，但在Gulp中，我有點迷失在實際上是最好的方式。

我應該將每個JS文件捆綁到一個文件中加上JSON嗎？

如果不是，通過gulp包含JSON文件的最佳方式是什麼？

來源

2015-02-23 c1c1c1

Glup只是一個自動化工作流程的工具。如果你應該把所有的js文件連接到一個文件或者只是某些文件，取決於你的用例。 – 2015-02-23 14:53:36

對不起，我寫了很差的問題。現在我編輯了它。我的意思是：我是否應該將JSON也包含在所有其他js文件中？這是一個很好的做法嗎？ – c1c1c1 2015-02-23 14:55:23

什麼是JSON？配置您的應用程序，REST服務的臨時存根數據等？ – sma 2015-02-23 14:56:12

你在問正確的問題，但是吞嚥本身並不能解決你的問題（只是給你提供了這樣的工具）。你正在尋找的是一個模塊系統。最常見的兩種模塊是AMD和CommonJS。

例如，如果您正在使用Webpack，你會被認爲是進入點（這是通過<script src='/js/entry.build.js'>加載單個腳本一個腳本文件。

你entry.js可能看起來像這個被「建」之前：

var $ = require('bower_components/jQuery'); 
var jsonData = require('js/json-data.js'); 

$(function() { 
    // do something with jsonData 
})

而且在entry.js運行的WebPack後，它會輸出具有捆綁到它所有的依賴關係一個js文件。

您可能還需要尋找到RequireJS或Browserify實現類似的功能。

來源

2015-02-23 15:14:42

感謝Jonathan Dumaine，正如我在之前的評論中所說的，Browserify看起來像一個很好的組合。我會盡量把頭圍住它。 – c1c1c1 2015-02-23 15:16:32

如果你的數據是靜態的，那麼把它和你的腳本一起使用可能是一個好主意，因爲這會節省一個額外的請求。如果這些數據很大，並且你不需要它，那麼包含它可能是一個壞主意。

對於這種情況的數據是靜態的，使用的所有，你可以做這樣的事情，但要獎勵，這時候只是說明你如何能做到這一點，但是這不是一個好的代碼）：

datastorage.js

/* 
    some simple data storage with a defined interface to register and retrive data 
*/ 
var dataStorage = {}; 

function registerData(key, value) { 
    dataStorage[key] = value; 
} 

function data(key) { 
    return dataStorage[key]; 
}

data1.js

registerData('data1', { 
    "propertyA" : "valueA" 
    /* some more data */ 
});

個main.js

/** a part of your code where you access this data **/ 
console.log(data('data1').propertyA);

你應該尋找一個AMD，RequireJS，CommonJS的，ES和諧你開始實現數據存儲，使用裝載/登記數據的常用技術之前。

來源

2015-02-23 15:10:56

謝謝@ t.niese爲您解答。我將深入學習CommonJS和Browserify。 – c1c1c1 2015-02-23 15:14:31

我正在經歷捆綁不同事物的同樣頭痛。我做了一些研究，並想出了一種將所有內容捆綁到一個HTML頁面的方法。包括圖像和字體。它還縮小和優化每個文件。所以你的整個單頁應用程序可以真正在一個單一的HTML頁面。你所要做的就是傳入開始頁面（例如Index.html）我剛剛在Git Hub上發佈了我的項目並將它稱爲SPAFramework/SpaBundler，你可以試試它，並且還有助於進一步開發它，因爲它實際上只是一個工作粗略草案。

來源

2015-03-04 14:39:46 DonO

咕嘟咕嘟+ JS庫+ JSON數據

回答

相關問題