23、深入理解 JavaScript 应用程序的打包与组装

深入理解 JavaScript 应用程序的打包与组装

1. 项目目录结构规划

在开发 JavaScript 应用程序时，合理的目录结构至关重要。只要将不同类型的资源分开存放，就能方便后续告知构建工具资源的位置。虽然 JavaScript 社区正在逐步形成项目目录结构的标准，但目前遵循一些合理的准则是很明智的。

对于 Ember.js 应用程序，建议将资源按以下目录进行划分：
- js/app ：存放项目中自行编写的 JavaScript 文件。
- js/lib ：存放第三方 JavaScript 文件，部分文件可能已被压缩。
- js/test ：存放项目的 JavaScript 单元测试文件。
- css ：项目的所有 CSS 文件直接存放在此文件夹。
- images ：存放项目的所有图片。

需要注意的是，有些构建工具可能对目录结构有特定要求。使用 Grunt.js 时，可自行定义目录结构，并告知 Grunt.js 文件的位置。这种目录结构便于应用程序、开发者和构建工具查找资源，多数目录为扁平结构，但 js/app 目录可能会有子目录。

2. 自定义源代码的结构设计

拥有合理的源代码结构极为重要。在编写小型概念验证或示例应用时，将所有 JavaScript 代码放在一个 app.js 文件中是高效的。但如果要长期维护并部署应用，就需要将