Gulp + JS 库 + JSON 数据

Question

我有一个单页网络应用程序，为此我使用了各种外部 JS 文件：

通过 bower
其他库未作为 bower 包提供（即我在本地拥有的其他一些 js 脚本）
一个包含一些数据的JSON文件
我的main.js文件整合了所有的JS代码

现在，我正在努力思考构建和发布此类应用的 JS 组件的最佳方式。

通常我会通过 index.html 中的 <script></script> 标记调用此类文件，但在 Gulp 中我有点迷失了实际上可能是最好的方法。

我应该将每个 JS 文件加上 JSON 捆绑在一个文件中吗？

如果没有，通过 gulp 包含 JSON 文件的最佳方法是什么？

Answer 1

如果您的数据是静态的，那么最好将其包含在您的脚本中，因为这样可以节省一个额外的请求。如果该数据很大并且您不会一直需要它，那么包含它可能不是一个好主意。

在这种情况下，数据是静态的并且一直在使用，您可以这样做，但值得一提的是，这只是为了说明如何做到这一点，但这不是一个好的代码）：

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 Harmony，以使用 loading/registering 数据的通用技术。

Answer 2

您问的是正确的问题，但 gulp 本身并不能解决您的问题（只是为您提供了解决问题的工具）。您正在寻找的是模块系统。两种最常见的模块样式是 AMD and CommonJS.

例如，如果您使用 Webpack，您将有一个脚本文件被视为入口点（这是加载的单个脚本通过 <script src='/js/entry.build.js'>.

您的 entry.js 在成为 'built' 之前可能看起来像这样：

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

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

在运行 Webpack entry.js 之后，它将输出一个 js 文件，其中捆绑了所有依赖项。

您可能还想查看 RequireJS or Browserify 以了解类似的功能。

Answer 3

我正经历着捆绑不同事物的同样头痛。我做了一些研究并找到了一种将所有内容捆绑到一个 html 页面中的方法。包括图像和字体。它还缩小和优化每个文件。因此，您的整个单页应用程序实际上可以位于单个 html 页面中。您所要做的就是传递起始页（例如 Index.html）我刚刚在 Git Hub 上发布了我的项目，并获得了它的名称 SPAFramework/SpaBundler 您可以尝试它并帮助进一步开发它实际上只是一个工作草稿。

Gulp + JS 库 + JSON 数据

Gulp + JS libraries + JSON data

javascript

json

gulp