Question

这不是以下问题的重复，这些问题涉及浏览器特定问题。我希望得到一个答案，import / export是否适用于客户端。

ECMA 6 Not working although experimental js is enabled
how export variable in ES6 in Chrome/Firefox?

//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

是否可以使代码在任何浏览器中运行？
让我们说，我们选择了一个转换器（BabelJS）并编译了代码。 import / export文件代码段是否可以在客户端或服务器端工作（在节点服务器中作为require方法）？

Answer 1

MDN说

注意：此功能目前未在本地任何浏览器中实现。它在许多转发器中实现，例如Traceur Compiler，Babel或Rollup。

例如，在您的代码段上使用babel之后，您将获得以下内容：

＆＃13;

//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

＆＃13;

此代码足以在NodeJ中使用。但要在浏览器中使用，您需要像require.js或browserify这样的东西。在此plunker中，我使用了require1k

Answer 2

像马纳索夫丹尼尔说的那样

MDN说


注意：此功能目前未在本地任何浏览器中实现。它在许多转发器中实现，例如Traceur Compiler，Babel或Rollup。

使用较新版本的ECMAScript（在浏览器中实现之前），您通常必须将ECMAScript代码转换（编译）为JavaScript。我选择的工具是 Babel ，虽然还有很多其他工具。

您可以转到终端并输入：

来安装Babel CLI

$ npm install --save-dev babel-cli

每当您对ES进行更改时，都应该重新编译为JS。

ES6 Transpilers

2 个答案: