7

これは、ブラウザ固有の質問を扱っている以下の質問の複製ではありません。import / exportクライアント側で機能するかどうかの答えを期待しています。

  1. 実験的なjsが有効になっているにもかかわらず、ECMA 6が機能しない
  2. Chrome/FirefoxのES6で変数をエクスポートする方法は?

//lib.js

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
  
//main.js
  
"use strict";

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Import Check</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Chrome で発生するエラー:
ここに画像の説明を入力

テスト済みブラウザ: Google Chrome バージョン 47.0.2526.106

  1. コードを任意のブラウザで動作させることは可能ですか?
  2. 1 つのトランスパイラー ( BabelJS) を選択し、コードがトランスパイルされたとします。import/ exportfile コード スニペットはクライアント側またはサーバー側で機能しますか (require メソッドとしてノード サーバー内) ?
4

2 に答える 2

4

MDN言う

注: この機能は、現時点ではどのブラウザにもネイティブに実装されていません。Traceur Compiler、Babel、Rollup などの多くのトランスパイラに実装されています。

たとえば、コード スニペットで babel を使用すると、次のような結果が得られます。

//lib.js

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.square = square;
exports.diag = diag;
var sqrt = Math.sqrt;
exports.sqrt = sqrt;

function square(x) {
    return x * x;
}

function diag(x, y) {
    return sqrt(square(x) + square(y));
}
//------ main.js ------
'use strict';

var _lib = require('lib');

console.log((0, _lib.square)(11)); // 121
console.log((0, _lib.diag)(4, 3)); // 5

NodeJs で使用するには、このコードで十分です。ただし、ブラウザで使用するには、require.js や browserify などが必要です。このプランカーではrequire1kを使用しました

于 2016-01-03T00:56:30.623 に答える
0

マナソフ・ダニエルが言ったように

MDN言う

注: この機能は、現時点ではどのブラウザにもネイティブに実装されていません。Traceur Compiler、Babel、Rollup などの多くのトランスパイラに実装されています。

新しいバージョンの ECMAScript (ブラウザーに実装する前) では、通常、ECMAScript コードを JavaScript にトランスパイル (コンパイル) する必要があります。私が選んだツールはBabelですが、他にもたくさんあります。

ターミナルに移動して次のように入力すると、Babel CLI をインストールできます。

$ npm install --save-dev babel-cli

ES に変更を加えるたびに、JS に再コンパイルする必要があります。

于 2016-01-03T01:04:30.590 に答える