web-dev-qa-db-ja.com

CommonJSの「require」でES6の「export default」を正しく使用する方法は？

私は Webpackチュートリアル を通して作業してきました。セクションの1つで、この質問の1行の本質を含むコード例を示します。

_export default class Button { /* class code here */ }
_

上記のチュートリアルの「コード分割」というタイトルの次のセクションでは、上で定義したクラスが次のようにオンデマンドでロードされます。

_require.ensure([], () => {
    const Button = require("./Components/Button");
    const button = new Button("google.com");
    // ...
});
_

残念ながら、このコードは例外をスローします。

_Uncaught TypeError: Button is not a function
_

今、私はES6モジュールを含めるright方法は単にファイルの先頭で_import Button from './Components/Button';_にすることであることを知っていますが、ファイルはbabelを悲しいパンダにします：

_SyntaxError: index.js: 'import' and 'export' may only appear at the top level
_

上記の（require.ensure()）の例をいじってみたところ、ES6の_export default_構文は、私のコードを含むdefaultというプロパティを持つオブジェクト（Button function）。

次のように、require呼び出しの後に_.default_を追加して、壊れたコード例を修正しました。

_const Button = require("./Components/Button").default;
_

...しかし、それは少し不格好に見え、エラーが発生しやすいと思います（ES6構文を使用するモジュールと、古き良き_module.exports_を使用するモジュールを知っておく必要があります）。

CommonJS構文を使用するコードからES6コードをインポートする正しい方法は何ですか？

javascriptecmascript-6webpackcommonjses6-module-loader
27
mr.b

_export default_をBabelで使用するには、次のいずれかを実行します。

  1. require("myStuff").default
  2. _npm install babel-plugin-add-module-exports --save-dev_

または3：

_//myStuff.js
var thingToExport = {};
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = thingToExport;
_
20
Cooper Buckingham