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

您需要使用的规则是：

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

在默认导入的情况下，确保存在默认导出。（default）

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

1 个答案: