web-dev-qa-db-ja.com

ECMAScript 6のインポートおよびエクスポート構文をサポートするブラウザーはどれですか？

現在、MEAN Stackを使用してWebアプリケーションを作成していますが、ECMAScript 6 JavaScriptでコードを作成しようとしています。ただし、インポート構文とエクスポート構文を使用すると、ChromeとFirefoxの両方でエラーが発生します。現在、ECMAScript 6を完全にサポートするブラウザはありますか？

注：ECMAScript 6がいつブラウザでサポートされるのかは尋ねていません。どのブラウザがECMAScript 6のインポートおよびエクスポート構文をサポートしているかを尋ねています。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox を参照してください

javascriptecmascript-6es6-module-loaderbrowser-supportes6-modules
38
Gregory R.

ChromeおよびFirefoxはimportおよびexport構文をサポートしています（ properparsesing のテストがあります）。

サポートされていないのはモジュールのロードです。モジュールの仕様が完全ではないため、モジュールをロードすることはできません。これには、何らかのモジュールバンドラーを使用する必要があります。私はフロントエンド開発者ではありませんが、同僚から Rollup について良い意見を聞きました。

11
Ginden

以下でサポートされています：

  • Safari 10.1
  • Chrome 61
  • Firefox 54 – about：configのdom.moduleScripts.enabled設定の背後。
  • エッジ16
32
Ali

現在、ES6モジュールのインポートに使用できるpollyfillがあります。

Chromeで正常にテストしました。

リンクは次のとおりです。 http://github.com/ModuleLoader/browser-es-module-loader

また、Edge14でネイティブに実装されます。

https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond

4
Supersharp

他の人が言ったように、それに対するサポートはまだ非常に限られています。しかし、完全なサポートがあったとしても....それを使用するのは賢明でしょうか？どうすればいいですか？

考えてみてください。 Node JSモジュールで記述された典型的なJSアプリには、数十個、さらには数百個の（非常に小さな）パッケージが含まれています。本当に多くのリクエストが必要ですか？

Browserify、Webpack、Rollupなどは、多くの小さなパッケージを1つの高速ダウンロードにバンドルできるため、非常に人気があります。 code splitting を使用すると、ページが実際に使用しているコードといくつかの構成設定、作成するバンドルの数、各バンドルに何を入れるかに基づいて、モジュールのバンドルをトランスパイル時に決定させることができます。そのようにして、多くのsmallパッケージを記述し、それらを（いくつかの）大きなバンドルとして提供できます。

私のポイントは、コードを概念レベルで適切に機能するパッケージに分割し、それらのパッケージを技術（ネットワーク）レベルで適切に機能するバンドルにバンドルすることです。最適なネットワークパケットサイズに基づいてコードを記述すると、プロセスのモジュール性が犠牲になります。

それまでの間、それを使用しても混乱を招くだけです。たとえば、Edgeブログの例をご覧ください。

import { sum } from './math.js';

拡張機能の追加方法.jsをfrom文字列に？ Node JSでは、通常、次のように記述します。

import { sum } from './math';

上記のコードはEdgeでも機能しますか？そして、名前付きパッケージについてはどうですか？これらのパスを全面的に機能させる方法を考える前に、ここで多くの非互換性が見られるのではないかと心配しています。

ほとんどの開発者にとって、System.importはほとんどブラウザに表示されず、メインストリームになると、バンドルソフトウェア自体のみが（効率化のために）使用を開始します。

4
Stijn de Witt

GoogleのJavascriptスタイルガイド によると：

ES6モジュール（つまり、exportおよびimportキーワード）をまだ使用しないでください。それらのセマンティクスはまだ確定されていません。セマンティクスが完全に標準になったら、このポリシーを再検討することに注意してください。

// Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

ただし、importとexportは、Traceur Compiler、Babel、Rollupなど、多くのトランスパイラーに実装されています。

0
Gregory R.