web-dev-qa-db-ja.com

Webpackと6to5を介してes6モジュールでnpmパッケージを消費する方法は？

プロジェクト（または任意のnpmパッケージ）でImmutableを使用したいとします。 _npm install_したので、_node_modules_にあります。もちろん、そこにはCommonJSのエクスポートがあります。ただし、プロジェクトでes6モジュールを使用したいと思います。

私はWebpackを使用してすべてをまとめてコンパイルし、6to5ローダーを使用してes6モジュール構文を処理しています。

私のソースファイルでは、_import Immutable from 'immutable';_ ---と言いますが、es6 importがエクスポートされたes6defaultを探しているため、これは問題を引き起こします。ケース（Immutableまたはおそらく他のほとんどすべてのnpmパッケージの場合）。コンパイルされたコードは次のようになります。var Immutable = require('immutable')["default"];---検索するdefaultプロパティがないため、もちろんエラーがスローされます。

Es6モジュールでnpmパッケージを使用できますか？

commonjswebpackjavascriptecmascript-6
22
davidtheclark

Babel.js 寄稿者はこちら。あなたは以下を探しています：

import * as Immutable from 'immutable';
// compiles to:
var Immutable = require('immutable');

インタラクティブデモ

注：これは、commonまたはcommonInteropモジュールオプションのいずれかを使用します。その他については、以下を参照してください： https://babeljs.io/docs/usage/modules/

30
James Kyle

ちょうどそれを理解しました。 （ソリューションはツール固有です---しかし、es6モジュールは、ツールが有効になっている場合にのみ存在するため、これで十分な「答え」だと思います。）

6to5のデフォルトのモジュール変換はcommonオプションを使用します。これにより、上記で把握した非常に問題が発生します。しかし、別のオプションがあります：commonInterop---これは私が扱っている状況に正確に対処するために構築されたに違いありません。 https://6to5.github.io/modules.html#common-interop を参照してください

だから6to5のための3つの歓声。

1
davidtheclark