私の「インポート」ステートメントが正しく翻訳されていませんか？

Question

それは、次の2行は等価であることmy understanding次のとおりです。

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

そして...

import Up from 'write-up' 

両方の例はUpとして利用可能write-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は（defaultフィールドを含む）write-upモジュールのすべての単一の輸出を含むオブジェクトに設定されています。

私は間違っていますか？

ここに私のWebPACKの設定から関連する部分があります：

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

Answer 1

バベルコンパイルimportステートメントは、二重の動作を持っています。インポートされたモジュールはバベルとES6 export文からコンパイルされた場合fooがバベル、またはになろうと何かでコンパイルされなかった場合は、その後、

import foo from 'foo'; 

は

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

のように（主に）振る舞うであろうがBabelと互換性があり、Babelに関する限り、特別な動作はなく、通常のCommonJSモジュールです。あなたのケースのように表示される場合では、それはあなたが

fsは、標準的なノードモジュールであり、持っている

import fs from 'fs'; 

のような通常のCommonJSモジュールをインポートすることができるように

const foo = require('foo'); 

ようバベルがこれを行うに動作しますno .defaultプロパティ。