如何使用Babel模块解析器（附代码示例）

下面的实现是我作为一个软件开发者的日常工作中的一个快速摘录。如果我遇到一个问题，并得出一个我认为值得分享的例子，我将把代码的要点放在这个网站上。它可能对其他偶然遇到相同任务的人有用。

在这个简短的演练中，我们将使用Babel模块解析器来为你的整个JavaScript应用程序将相对路径转换为别名。你可以通过命令行安装它：

npm install babel-plugin-module-resolver --save-dev

并在你的*.babelrc*文件中使用它来创建你的第一个模块别名：

{
  ...
  "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "@icons": "./src/components/icons"
        }
      }
    ]
  ],
  ...
}

在这种情况下，我们要给所有的Icons一个别名路径。想象一下，你会有另一个src/services/icon.js文件来处理你的图标。现在从src/icons文件夹中导入一个图标就更容易了：

// old way to import
import { CheckIcon } from '../components/icons'
import CancelIcon from '../components/icons/CancelIcon'

// new way to import
import { CheckIcon } from '@icons'
import CancelIcon from '@icons/CancelIcon'

在你的*.babelrc*文件中，你可以引入更多这样的别名来整理你的整个JavaScript应用程序的导入。

使用ESLint的Babel模块解析器

如果你使用ESLint，你必须让ESLint知道Babel的模块解析器中定义的别名。首先，再安装两个软件包。

npm install eslint-plugin-import eslint-import-resolver-babel-module --save-dev

其次，在你的*.eslintrc*中使用这些新的插件来匹配Babel的模块解析器和ESLint。

{
  ...
  "extends": [
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  ...
}

这就是了。现在ESLint应该对Babel的模块解析器很满意了。

Babel模块解析器可以帮助你整理整个JavaScript应用程序的相对导入。如果你想避免用相对路径在文件夹中上下移动，可以在你的应用程序的关键路径上添加别名，以方便从这些地方导入模块。