咕嘟咕嘟+ 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数据

回答

相关问题