import为什么不能用解构赋值呢？

Question

export.js

export let obj = { name: 111 } // 导出一个对象

import.js

 // 想直接导入该对象的name属性，会报错
import { obj: {name} } from './export.js'

为什么会报错呢？
想直接导入name，还有其它写法吗？

Answer 1

import 语法 不支持这种写法。

MDN 上有一些 import 用法的例子：

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";

Answer 2

0、先说结论：语法不支持

为什么不支持？下面来分析下。

1、export.js 经过 webpack 和 babel 的转换：

export let obj = { name: 111 }

变为了

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.obj = void 0;
var obj = {
  name: 111
};
exports.obj = obj;

2、import.js 经过 webpack 和 babel 的转换

import { obj } from './export.js';

变为

"use strict";

var _export = require("../export");

3、结论

所以，假如你这样写：

import { obj } from './export.js';

是没有问题的，很明显就是 _export.obj 是可以直接找到。此时你可能以为：

_export.obj = {name: 111}

所以你可以使用 变量 中的解构赋值

let {name} = _export.obj

没错，如果是变量上，这样是没有问题的。但import中不支持这种写法！

所以当你使用：

import { obj: {name} } from './export.js'

这样写。那就有问题了，不符合babel的解析规则。

Answer 3

谢邀。

前面的人答的挺好的，建议采纳，是对他们最好的鼓励。

另外其实这类问题，如果题主不喜欢看 spec 的话（确实很累），那 MDN 是个不错的通俗易懂的地方。里面也有挺多内容被翻译成了中文。题主要是有兴趣也可以参与内容的本地化。