Question

我有一个单页面webapp，我正在使用各种外部JS文件：

通过bower
其他未作为bower软件包发布的库（即我本地拥有的其他js脚本）
包含一些数据的JSON文件
我的main.js文件集成了所有JS代码

现在，我正试图围绕构建和发布此类应用程序的JS组件的最佳方式。

通常情况下，我只会通过<script></script>中的index.html标记来调用此类文件，但在Gulp中，我实际上已经失去了实际上最好的方式。

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

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

Answer 1

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

例如，如果您使用的是Webpack，那么您将拥有一个被视为条目点的脚本文件（这是通过{{1}加载的单个脚本}。

您的<script src='/js/entry.build.js'>在构建之前可能看起来像这样：

entry.js

在entry.js上运行Webpack后，它将输出一个js文件，其中包含所有依赖项。

您可能还需要查看RequireJS或Browserify以了解类似功能。

Answer 2

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

对于这种情况，数据是静态的，并且在你可以做这样的事情的时候一直使用，但是要奖励这只是为了说明你如何做到这一点，但这不是一个好的代码）：

<强> 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，使用加载/注册数据的常用技术。

Answer 3

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

Gulp + JS库+ JSON数据

3 个答案: