在前端开发中，一些第三方的库和工具包是必不可少的。但是，为了确保这些库的可维护性和方便性，也有必要掌握一些工具，比如 npm。
npm （全称 Node Package Manager） 是 Node.js 的包管理器，也是世界上最大的开源库生态系统。在前端开发中，npm 是一种包管理器，可以用来安装、分享以及发布 JavaScript 包。它是前端开发的重要工具之一。
在本文中，我们将讨论一个库，Hem，其是一个用于管理和构建 JavaScript 模块的 npm 包，通过构建和衍生多个模块，可以将大型 HTML5 JavaScript 应用程序拆分成更小的模块。下面我们将介绍 Hem 的详细使用教程。
安装
要使用 Hem，您需要在命令行中使用以下命令安装 Hem：
npm install hem -g
使用 -g 参数后，Hem 被安装为全局安装的 Node.js 包，这意味着您可以在任何位置使用 Hem。
使用
在 Hem 中，每个独立的 JavaScript 模块都是一个单独的文件，这些文件可以打包到一起，以创建 Hem 应用程序。
以下是一个 Hem 应用程序的示例文件目录结构：
-- -------------------- ---- ------- --- --- - --- --- - - --- ------------- - - --- --- - --- ----- - - --- -------- - - --- -------- - - --- --- - --- ------ - - --- --------- - - --- --------- - - --- --- - --- ----------- - - --- -------------- - - --- -------------- - - --- --- - --- ------ - --- --- --- ------ - --- ---------- - --- ------ - --- ----------- - - --- ---------------- - - --- --- - --- ------ - - --- -------- - - --- --- - --- --- --- ------------
您可以看到，这个应用程序由多个模块组成，每个模块都在 Hem 构建中被转换成独立的 JavaScript 文件。在 Hem 中，应用程序文件位于 App 目录中，被打包和转换后的文件位于 public 目录中，布局文件（例如 index.html）也在 public 目录中。
要使用 Hem，在当前 Hem 应用程序的根目录下您需要创建一个空的 application.js 文件，并从其他模块引用这个文件。在 Hem 构建中，会将文件打包到 public/javascripts/application.js 中。
与此同时，使用 hem server 命令启动 Hem 服务器，使用 hem build 命令可以构建 Hem 应用程序，将 App 目录中的文件打包并放置在 public/javascripts/application.js 中。
构建完成后，可以通过 http://localhost:9294 访问应用程序。
示例代码
以下是一个 Hem 应用程序的示例代码：
application.js
//= require_self
//= require_tree ./collections
//= require_tree ./models
//= require_tree ./views
//= require ./init
window.App = require('app'),init.js
-- -------------------- ---- -------
--- ------- ----------------
--- ------- --------------
--- ------- ------------------
--- ------- --------------
--- --------------- - ----------------------------------------
- - -----------
---------- - ---------
------------ -
------ ------------------------
---总结
本文介绍了在 Hem 中创建和管理 JavaScript 模块的方法。通过 Hem，您可以轻松地组织复杂的 JavaScript 应用程序，并在 Hem 构建中使用这些模块。通过 Hem，可以更好地管理和维护您的应用程序，提高了开发效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77109