我的 "import" 语句是否被错误地转译？

Question

下面两行等价的是my understanding：

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

还有...

import Up from 'write-up'

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

不幸的是，使用 Babel 和 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 语句具有双重行为。如果导入的模块是用 Babel 从 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 是一个标准的 Node 模块并且没有 .default 属性.

我的 "import" 语句是否被错误地转译？

Is my "import" statement being incorrectly transpiled?

javascript

webpack

babeljs

es6-modules