Question

请查看以下导入声明：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

是否可以为要导入的程序包的名称提供别名-即在这种情况下为@fortawesome/react-fontawesome。这样，我不必每次都写出整个项目名称。

为清楚起见，我正在寻找最终结果，我可以执行以下操作：

import { FontAwesomeIcon } from 'fa'

或这个

import { FontAwesomeIcon } from '@custom/fa'

使用fa（或@custom/fa）创建的名称引用了实际的@fortawesome/react-fontawesome库。

这可能吗？如果可以，怎么办？

Answer 1

我假设您正在使用webpack。如果是这样，您可以使用Webpack.resolve功能。您只需要编辑webpack.config.js并进行如下设置：

// webpack.config.js
module.exports = {
    //...
    resolve: {
        alias: {
            fa: path.resolve(__dirname, '@fortawesome/react-fontawesome')
        }
    }
    //...
}

您的导入将变为

import { FontAwesomeIcon } from 'fa'

Answer 2

您可以创建一个将依赖项存储在对象中的文件。我将这个文件称为dependencies.js。

export default const dependencies = {
  FA: '@fortawesome/react-fontawesome',
  ...
  ...
}

然后，您可以将其导入每个javascript文件的最顶部，并使用它导入进一步的依赖关系。

import dependencies from './dependencies';
import { FontAwesomeIcon } from dependencies.FA

导入ES6：为软件包指定别名

2 个答案: