技巧汇总

本页收集汇总了一些很有用但不容易记忆或查找到出处的代码片段

调试

如何调试 babel 转译后的代码？

默认情况下，你在 ember.js app 所写的代码都会进过 babel 处理转译之后再在浏览器中运行，这样一来你会发现调试的时候很痛苦，因为 babel 已经把你的代码搅得“面目全非“了。

可以通过开启 babel 的 sourceMaps 支持来解决这个问题，只需要在 ember-cli-build.js 文件中加入下列配置即可：

ember-cli-build.js

const app = new EmberApp(defaults, {
  // ...
  
  babel: {
    sourceMaps: process.env.EMBER_ENV !== 'production' ? 'inline' : null,
  },
});

这一行代码仅在应用以 production 环境编译的时候关闭 sourceMaps，其他情况下都会开启内联 sourceMaps 的支持（包括 development 和 test 环境）。如果你不介意在生产环境的代码中也包含 sourceMaps 的话，也可以简单写成：sourceMaps: 'inline' 。

为什么要在生产环境中包含 sourceMaps？

sourceMaps 主要用于在源代码和编译后的源代码之间做一个匹配映射，以便于调试代码，或者代码运行出错之后可以准确定位到编译前的源代码位置。

尽管我们通常只在开发或测试环境下才需要它，但有些产品非常关注生产环境时的问题处理，它们会采用一些在线的错误收集和跟踪服务（比如 Rollbar、Sentry 等产品）来帮助它们达成这一目标。而这些服务要想良好工作，就需要有 sourceMaps 的支持。

当然，更加“完美“的流程应该是在开发/测试环境的时候采用内联 sourceMaps，而在生产环境时生成独立于源代码之外的 sourceMaps 文件，然后通过自动化流程将这些 sourceMaps 文件上传到在线错误收集和跟踪服务能够访问到的地方上。这样既可以保证生产环境上代码的“干净、轻量“，又可以完美利用好在线错误收集和跟踪服务。

测试

如何在 test helper 中查找到一个指定的 service？port { getContext } from '@ember/test-helpers';

// when you want to retieve the current context:
let context = getContext();

// When you want to get access to the owner of:
let owner = context.owner;

// When you want to look up a service:
let fooService = owner.lookUp('service:foo');

如何渲染测试（rendering test）中捕获抛出的错误？

渲染测试一般用于测试 components, helpers, modifiers，如果在上述代码中含有抛出异常的逻辑（包括 assert ），那么需要在测试中使用 Ember.onerror 回调来捕获异常错误。举例如下：

@test async 'throws an assertion'(assert: Assert): Promise<void> {
  // 以下是期望的用法，但现在不支持
  // assert.throws(async () => {
  //   await render(hbs`<Example />`);
  // }, 'Assertion Failed: ...');

  // 以下是替代的用法，能用但不优雅
  Ember.onerror = (error): void => {
    assert.equal(error.message, 'Assertion Failed: ...');
  };
  await render(hbs`<Example />`);
}

这是 core team 已经知悉的问题，正在改进中。

如何 Mock 一个 Component

有时候测试一个组件或许会涉及到别的组件，比如说 outer -> inner 结构的时候，我们并不关心 inner 组件的实际情况，此时我们可以 mock 它（也就是创造一个“假的“替代实际存在的 inner）：

this.owner.register(
  'component:inner-component',
  Component.extend({ layout: hbs`<div></div>` })
);

如果上述方法不管用（有可能，但我不记得具体原因），还可以尝试这样做：

this.owner.register('component:inner-component', Component.extend({}));
this.owner.register('template:components/inner-component', hbs`<div></div>`);

工具

如何让 ember-cli-template-lint 不检查 local linked add-on 中的模板？

在本地开发时，为了方便调试有时候会使用诸如 npm link 或 yarn link 来创建某个 add-on 的本地链接，这样可以在应用程序里直接调试 add-on 在本地的代码而不需要每次修改都重新发布 add-on。

又因为这种本地链接的 add-on 需要开启

isDevelopingAddon() { return true; }

才可以让 add-on 触发自动刷新，而这个 hook 会导致 ember-cli-template-lint 针对本地链接的 add-on 里的模板进行语法检查。

有时候我们不希望出现这种行为（比如说这个 add-on 不是你开发的，你调试它只是为了解决某个 bug，但你并不希望帮它处理模版上存在语法问题），一个简单的解决办法就是：

$ yarn remove ember-cli-template-lint
$ ember install ember-template-lint