安装 — $mol

安装

快速上手会一步步带你完成第一个应用。本页是参考手册：$mol 项目如何组织，以及构建是如何工作的。

$mol 应用运行在 MAM 之中——它是构建工具和模块注册表。你只需克隆一次，然后在其中开发你的模块：1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start 会在 http://localhost:9080/ 启动一个带监听的开发服务器。它在保存时重新构建，并自动解析依赖——你永远不用维护打包器配置。

模块如何命名

每个组件名都映射到一个文件夹路径，且每个下划线都是文件夹分隔符：1$my_app → my/app/2$my_app_header → my/app/header/模块文件夹名永远不包含下划线——多词名称请使用嵌套文件夹。如果你用到的某个组件始终没有出现在打包结果中，几乎总是因为文件夹路径与类名不匹配。

模块剖析

一个组件就是一个文件夹，最多包含四个文件：文件用途name.view.tree声明式布局name.view.ts行为（TypeScript）name.view.css.ts带类型的样式name.view.tree、index.html应用模块的入口应用的 index.html 会挂载根组件：1<body mol_view_root>2 <div mol_view_root="$my_app"></div>3 <script src="web.js"></script>4</body>

生产环境构建

开发服务器会即时构建，但你也可以从工作区根目录显式构建任意模块：1npm run start my/app产物会输出到 my/app/-/——包括 web.js、web.css 和 web.audit.js。务必检查审计文件：干净的 web.audit.js 意味着没有未使用的依赖，也没有类型错误。

添加 npm 包

用 require 引用一个包，MAM 会在下次构建时安装它：1const dayjs = require( 'dayjs' ) as typeof import( 'dayjs' )

下一步

工作区就绪后，接下来了解 UI 本身是如何描述的——继续阅读

视图。在 GitHub 上编辑此页这有帮助吗？是否上一页工具链下一页视图本页内容环境要求 MAM 工作区模块如何命名模块剖析生产环境构建添加 npm 包下一步