我的“导入”语句是否被错误地转移了？

Question

以下两行等价于我的理解：

const Up = require('write-up').default

还有..。

import Up from 'write-up'

这两个示例都应该使write-up模块的默认导出可用为Up。

不幸的是，使用巴贝尔和Webpack，这不是我看到的行为。

第一个例子运行得很好。它产生了这条线：

var Up = __webpack_require__(5).default;

Up设置为write-up模块的默认导出，这是我所期望的行为。

第二个例子不起作用。它产生了这样的结果：

var _writeUp = __webpack_require__(5);

var _writeUp2 = _interopRequireDefault(_writeUp);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

不是将Up设置为默认导出，而是将Up设置为包含write-up模块(其中包括default字段)的每个导出的对象。

我做错了什么？

下面是Webpack配置的相关部分：

{
  test: /.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  query: {
    presets: ['es2015']
  }
}

Answer 1

Babel编译的import语句具有双重行为。如果正在导入的模块是从ES6 export语句中编译的，那么

import foo from 'foo';

会表现得很像

const foo = require('foo').default;

但是，如果foo不是用Babel编译的，或者是试图与Babel兼容的东西，那么就Babel而言，它没有特殊的行为，并且是一个普通的CommonJS模块。在这种情况下，这似乎是你的情况，它将表现为

const foo = require('foo');

Babel是这样做的，这样您就可以导入普通的CommonJS模块，比如

import fs from 'fs';

其中，fs是一个标准节点模块，没有.default属性。