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 中遇到的错误：
在此处输入图像描述

测试浏览器：谷歌浏览器版本 47.0.2526.106

  1. 是否可以使代码在任何浏览器中工作？
  2. 可以说，我们选择了一个转译器 ( BabelJS) 并转译了代码。import/文件代码片段将export在客户端或服务器端工作（在节点服务器中作为需要方法）？
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 这样的东西。在这个plunker 中，我使用了 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 回答