【问题标题】：How can I alias a default import in JavaScript?如何在 JavaScript 中为默认导入设置别名？
【发布时间】：2017-01-09 23:18:18
【问题描述】：

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

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

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

import defaultMember from 'my-module';

我想为默认导入设置别名，并且我认为以下方法会起作用：

import defaultMember as alias from 'my-module';

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

我如何（或者我可以？）为默认导入设置别名？

【问题讨论】：

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

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

import alias from 'my-module';

你也可以这样做

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

但那是相当深奥的。

【讨论】：

别名本身就是深奥的！导入命名的导出和在测试redux组件时很方便：import WrappedComponent, { Component } from 'my-module';
一些非常严格的 tslinting 规则不同意，实际上希望您将默认输入的名称保留为文件名
@Blauhirn 是否适用于无法遵循引用并需要对其重构工具使用全局搜索和替换的旧 IDE？可笑。
@Bergi 不，这是 tslint 规则“import-name”，例如使用根据 airbnb tslint 规则集，因此相当普遍。这些规则的存在是为了鼓励一致、无错误和可读的代码
MDN 文档应该反映这些文档更新：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案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"

什么是default export？

默认导出允许我们导出单个值或为您的模块设置后备值。

用于导入默认导出（非默认）：

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

export default functionName;

解决方案

问题中提到的defaultMember已经是别名，你可以随意改名。

现在导入导出的函数（`functionName()`）；

import AliasFunction from "my-module.js"

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

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