如何防止在ES2015中導入不存在的名稱？

Question

/* 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嗎？

Answer 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
    ...
  }
}

您需要使用的規則是：

確保命名導入對應於遠程文件中的命名導出。 （ 命名 ）

給定默認導入，確保存在默認導出。 （ 默認 ）