概述
ember-pod-states-resolver 是一款用于 Ember.js 项目中的状态解析器。它能够自动将类的状态转换成文件名和文件夹组合，简化了文件结构。这个包能够大大减少项目的冗余代码、提高模块化程度，并且降低调试的工作量，使得项目的可维护性大大提高。
安装
在使用 ember-pod-states-resolver 之前，需要首先在项目中安装该包，在终端中输入以下命令：
npm install --save-dev ember-pod-states-resolver
使用
在项目中使用 ember-pod-states-resolver 的步骤如下：
步骤 1：在项目中定义类名称
例如，我们需要定义一个名为 button 的类，可以像下面这样定义：
export default class Button extends Component {
// ...
}步骤 2：在文件系统中创建文件夹
在项目的 /app 文件夹下，创建一个名为 components 的文件夹，并在其中创建一个名为 button 的文件夹。如下所示：
└── app
└── components
└── button
├── component.js
└── template.hbsember-pod-states-resolver 将根据类的名称自动查找文件夹，并将文件与状态相关联。例如，上面定义的 Button 类将在 app/components/button/component.js 和 app/components/button/template.hbs 文件中查找。
步骤 3：在项目中使用状态
在定义类时使用状态，而不是文件。
export default class Button extends Component {
// ...
classNameBindings: ['disabled'],
tagName: 'button',
disabled: false,
};步骤 4：删除冗余的文件路径
在应用 ember-pod-states-resolver 之后，我们可以将所有的状态定义放在类中，而不需要涉及文件路径。同时，为了避免文件名与状态名冲突，我们可以删除冗余的文件路径。
在 ember-cli-build.js 中，添加以下内容：
const app = new EmberApp(defaults, {
// ...
podModulePrefix: '',
podModulePrefixOverride: true,
// ...
});podModulePrefixOverride: true 可以覆盖默认 podModulePrefix，并将其设置为空字符串。
步骤 5：重新构建项目
在项目根目录中运行以下命令：
ember build
之后你将会看到只保留了与状态相关的文件。
示例代码
下面是一个简单的示例代码，它会使用 ember-pod-states-resolver 简化项目中的文件结构：
-- -------------------- ---- ------- -- ---------------------------------- ------ --------- ---- --------------------- ------ ------- ----- ------ ------- --------- - ----------------- - ------------- ------- - --------- -------- - ------ -
<!-- app/components/button/template.hbs -->
{{yield}}这样，在构建项目后，文件结构会变得更加规范：文件将被组织在正确的文件夹中，而不再分裂到不同的目录中。
总结
ember-pod-states-resolver 是一款非常有用的工具，可以帮助开发人员更好地组织项目结构，并降低维护代码所需的时间。使用该包可以大大提高项目的可维护性、完整性和良好性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecad2