拆分一个 javascript 项目答案

【问题标题】：Splitting up a javascript project拆分一个 javascript 项目
【发布时间】：2014-12-10 10:20:30
【问题描述】：

我越来越多地看到大型 javascript 项目被拆分成单独的文件，然后编译成一个发行版。我想试试这个工作流程。我一直在研究 Node.js、npm 和 Grunt，但这些都是非常陡峭的学习曲线，并且包含许多我目前不感兴趣的其他概念。

谁能推荐一些关于这些工作流程的最佳实践的文献？

如果我将我的代码拆分，我该如何指明它应该如何映射在一起？

如何将项目编译成单个发行版？

如何为自定义构建提供选项？

【问题讨论】：

标签： javascript node.js gruntjs npm

【解决方案1】：

我们以 jQuery 为例。在典型情况下，您将有几个不同的文件组成一个项目； CSS 文件、HTML 文件、JavaScript 文件、jQuery 文件。所有这些文件将组成一个项目。那么，它们是如何流动的呢？好吧，如果您的自定义 JavaScript 文件使用了 jQuery，那么在您的 HTML 中，您需要首先加载 jQuery 文件，然后是您的 JavaScript 文件。这样做的原因是因为如果你先加载 JavaScript 文件，它还没有 jQuery 的代码，所以它不会工作。而当您首先加载 jQuery 时，您正在加载所有这些引用，以便它们可以在其他文件中使用。

您可以运行一个简单的测试来了解这一切是如何工作的，那就是创建 2 个单独的 JavaScript 文件。我们称之为 JS1.js 和 JS2.js。

HTML 文件

<!DOCTYPE html />
    <html>
        <head>
            <link rel="stylesheet" href="theCSS.css" />
        </head>
        <body>
            <script type="text/javascript" src="JS1.js"></script>
            <script type="text/javascript" src="JS2.js"></script>
        </body>
    </html>

JS1.js

function fromJS1File() {
    var message = "Hello World";
    return message;
}

JS2.js

alert(fromJS1File());

当你运行它时，你会收到一条警告消息说'Hello World' 现在，你可以看到 JS2.js 是如何实际调用来自 JS1.js 的代码

现在，尝试重新组织 HTML 代码中的脚本标签，以便首先加载 JS2.js。您会看到没有任何反应，或者您会收到错误/未定义的消息。

至于“映射”部分，这完全取决于您的操作流程。有时会有通用或全局文件，而其他文件则更为细化。最好的经验法则是回到 jQuery 文件示例。如果它适用于您的所有 JS 文件，请确保首先加载它，以便您的其他代码文件可以利用它。

【讨论】：