Question

我有一个用ES6编写的node.js库lib（用Babel编译），我在其中导出以下子模块：

"use strict";

import * as _config from './config';
import * as _db from './db';
import * as _storage from './storage';

export var config = _config;
export var db = _db;
export var storage = _storage;

如果从我的主项目中包含像这样的库

import * as lib from 'lib';
console.log(lib);

我可以看到正确的输出，它按预期工作{ config: ... }。但是，如果我尝试像这样包含库：

import lib from 'lib';
console.log(lib);

它将是undefined。

有人可以解释这里发生了什么吗？这两种导入方法不应该是等价的吗？如果没有，我错过了什么区别？

Answer 1

import * as lib from 'lib';

要求一个对象包含'lib'的所有命名导出。

export var config = _config;
export var db = _db;
export var storage = _storage;

被命名为exports，这就是你最终得到像你这样的对象的原因。

import lib from 'lib';

要求default导出lib。 e.g。

export default 4;

会lib === 4。它不会获取指定的导出。要从默认导出中获取对象，您必须明确执行

export default {
  config: _config,
  db: _db,
  storage: _storage
};

Answer 2

只需添加到Logan's解决方案，因为了解导入括号，*并且没有为我解决问题。

import * as lib from 'lib';

相当于：

import {config, db, storage} as lib from 'lib';

其中*类似于从lib导入所有export var的通配符。

export var config;
export var db;
export var storage;

或者，使用：

import lib from 'lib';

允许您仅访问默认导出：

// lib.js
export default storage;

使用{}也只会导入模块中的特定组件which reduces the footprint with bundlers like Webpack.

虽然：

import storage, { config, db } from './lib'

会导入所有模块，包括export default storage;

见Dan Abramov的回答： When should I use curly braces for ES6 import?

Answer 3

import X from Y;是一种语法糖。

import lib from 'lib';

等于

import {default as lib } from 'lib';

导入X和导入*之间的差异为node.js中的X（ES6 / Babel）？

3 个答案: