Javascript 导入句柄未定义答案

【问题标题】：Javascript import handle undefinedJavascript 导入句柄未定义
【发布时间】：2015-11-19 16:52:14
【问题描述】：

是否可以在下面的 switch case 示例语句中捕获拼写错误？

首选方法是 eslinter 报告警告/错误。如果未定义，目前将toString() 添加到const 可用于在运行时引发TypeError。

actionTypes.js

export const UPDATE_REQUEST = 'UPDATE_REQUEST';

reducer.js

import * as types from '../constants/actionTypes';

export default function pouchdbReducer(state = {}, action) {
  switch (action.type) {
    case types.UPDDATE_REQUEST:
      // there is a typo above and it evaluates to `undefined`
      // this code would never be reached - how to make it an error
      return Object.assign({}, state, {updated: true});
    default:
      return state;
  }
}

更新：

正如@nikc.org 回答eslint-plugin-import 和namespace 选项可用于检查此类错误。

这是带有配置和演示的小型存储库：

https://github.com/bmihelac/test-js-import-undefined/tree/eslint-plugin-import

eslint 配置的相关部分是：

"plugins": ["import"],
"rules": {
  "import/namespace": [2],

【问题讨论】：

好吧，试图捕捉这样的错误的问题在于它们不一定是错误。换句话说，考虑到 JavaScript 的规则，代码没有任何错误。
@Pointy 因为 es6 模块是静态的，我希望一些静态分析器可以找到这样的错别字。
对，聪明的静态分析可能至少会注意到没有拼写错误的常量。

标签： javascript node.js es6-module-loader

【解决方案1】：

免责声明，我是tern-lint的作者。

我建议您使用tern-lint，它能够报告诸如“未知属性”之类的错误。

您可以将此 linter 与命令或支持它的编辑器（Emacs、Atom、CodeMirror 或 Eclipse）一起使用。这里是 Eclipse tern.java的截图

【讨论】：

tern-lint 看起来很有希望，但 eslint-plugin-import 似乎更易于使用
@bmihelac 你能告诉我 tern-lint 有什么困难吗？将 tern-lint 与命令一起使用并不常见，所以请告诉我改进它的建议，谢谢！
因为我已经在使用 eslint，所以设置 eslint-plugin-import 非常简单。我也使用 tern 但不幸的是，没有对 tern-lint 的 vim 编辑器的开箱即用支持（这就是为什么我说设置 eslint-plugin-import 更容易）。此外，我发现 tern 对于较大的项目可能会有缓慢的响应和超时，这肯定会随着时间的推移而改善（猜测也可以从 tern-lint 中得到）。

【解决方案2】：

ESLint 的 eslint-plugin-import 插件对 imports 和 exports 执行静态分析，并且可以配置为根据不同的标准引发错误或警告，包括您的问题中您拼错参考的情况一个导入的符号。

要完全消除该问题，您可以查看Tern，它可以让您在多个编辑器中深入了解代码并完成代码，从而完全避免拼写错误。

【讨论】：

@aschipfl 它怎么不提供答案？如果你只是觉得它太短，我可以用平淡无奇的绒毛填充答案，但它不会增加任何价值。问题是“您可以使用静态分析来查找对导入符号的无效引用吗？”。我的回答是：“是的，你可以，这里有一个工具可以做到这一点。”这怎么不是答案？
@nikc.org - “命名空间”是我正在寻找的 eslint-plugin-import 的选项。

【解决方案3】：

我想根据动作类型的数量（如果您愿意将它们分解），您可以稍微改变导入它们的方式。

可能是这样的：

import {TYPE_ONE, TYPE_TWO} from '../constants/firstActionTypes';
import {TYPE_THREE} from '../constants/secondActionTypes';

export default function pouchdbReducer(state = {}, action) {
  switch (action.type) {
    case TTYPE_ONE:
      // Linting should identify this easily now
      return Object.assign({}, state, {updated: true});
    default:
      return state;
  }
}

典型的 linters 可以很容易地发现这一点，并且附带的好处是您可以将您的行为分解为他们的关注点。

【讨论】：