如何防止在 ES2015 中导入不存在的名称？

【问题标题】：How do I prevent importing nonexistent names in ES2015?如何防止在 ES2015 中导入不存在的名称？
【发布时间】：2017-10-25 17:44:00
【问题描述】：

/* index.js */
import { React } from 'react';
import { USER, ORDER } from './StaticVariable';
class AgentList extends React.Component {
  render() {
   const useInfo = USER;
   const orderId = ORDER;
   return <Info useInfo={useInfo} orderId={orderId} />
  }
}

/* StaticVariable.js */
export const ORDER = 12347600;

似乎 babel-loader 不会抛出错误。并且页面也不会控制台错误。我应该怎么做才能避免导入未定义的模块或变量？使用 eslint？

【问题讨论】：

使用会向您指出此类错误的编辑器。你用的是什么编辑器？

标签： javascript import ecmascript-6 babeljs

【解决方案1】：

这个 eslint 插件完全满足您的需求：eslint-plugin-import。

你可以安装它：

npm install eslint-plugin-import -g

并在.eslintrc中配置插件：

{
  ...
  "extends": [
    ...
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "plugins": [ "import" ],
  "rules": {
    "import/named": 2,
    "import/default": 2
    ...
  }
}

您需要使用的规则是：

确保命名导入对应于远程文件中的命名导出。 (named)

在给定默认导入的情况下，确保存在默认导出。 (default)

【讨论】：