如何在 JavaScript 中为默认导入添加别名？起源，解决方案和答案：溶液

javascript ecmascript-6 es6-modules

2022-08-29 22:31:15

使用ES6模块，我知道我可以别名命名导入：

import { foo as bar } from 'my-module';

我知道我可以导入默认导入：

import defaultMember from 'my-module';

我想为默认导入添加别名，我认为以下内容会起作用：

import defaultMember as alias from 'my-module';

但这会导致解析（语法）错误。

如何（或我可以？）别名默认导入？

答案 1

defaultMember已经是一个别名 - 它不需要是导出的函数/事物的名称。就这么做

import alias from 'my-module';

或者你可以做

import {default as alias} from 'my-module';

但这是相当深奥的。

答案 2

起源，解决方案和答案：

模块可以从自身导出功能或对象，以便在其他模块中使用

模块用于：

导入别名是执行标准导入的位置，但不是使用导出模块预定义的名称，而是使用在导入模块中定义的名称。

您可能正在导入多个导出的模块，但导出的名称（来自不同模块）是相同的，这会使JS感到困惑。别名解决了这个问题。

多个别名编译失败的示例：

Failed to compile.
/somepath/index.js
SyntaxError: /somepath/index.js: Identifier 'Card' has already been declared (6:9)

导入别名将允许您将名称相似的导出导入到模块中。

import { Button } from '../components/button'
import { Card } from '../components/card'
import { Card } from 'react-native-elements'

导入命名导出时（非默认值）：

// my-module.js

function functionName(){
  console.log('Do magic!');
}

export { functionName );

导入模块：

import { functionName as AliasFunction} from "my-module.js"

默认导出允许我们导出单个值或为您的模块提供回退值。

对于导入默认导出：

// my-module.js
function functionName(){
  console.log('Do magic!');
}

export default functionName;

问题中提到的已经是一个别名，您可以将名称更改为您喜欢的任何名称。defaultMember

import AliasFunction from "my-module.js"

或者像这样（正如@Bergi所提到的）：

import {default as AliasFunction} from 'my-module.js';