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属性。

是我的＆＃34; import＆＃34;声明被错误地描述？

1 个答案: