ES6 Transpilers中的导入/导出[重复]答案

【问题标题】：import / export in ES6 Transpilers [duplicate]ES6 Transpilers中的导入/导出[重复]
【发布时间】：2016-01-03 00:48:06
【问题描述】：

这不是以下处理浏览器特定问题的问题的重复。我期待import / export 是否可以在客户端工作的答案。

//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 文件代码 sn-p 将在客户端或服务器端工作（在节点服务器中作为要求方法）？

【问题讨论】：

当您的问题是关于 chrome 时，为什么您的标题是“ES6 转译器中的导入/导出”？
如果您认为问题不重复，请编辑您的问题。
@torazaburo，我已经更新了我真正期望的问题！
早期标记的原始问题和当前问题相同。它需要重新打开！
@torazaburo，请重新打开问题

标签： javascript google-chrome ecmascript-6 transpiler

【解决方案1】：

MDN 说

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

例如，在你的代码 sn-p 上使用 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

【讨论】：

你的意思是说如果没有 babel、traceur、typescript 等转译器，即使我们添加了 use strict 也无法进行测试
"use strict"; 定义 JavaScript 代码应该在“严格模式”下执行。
我希望答案是工作代码 sn-p 以使导入功能不仅可以参考！
@Venkatraman 我使用了 babel 并获得了我添加的代码来回答。
@Venkatraman 也看看这个问题first second

【解决方案2】：

就像马纳索夫丹尼尔所说的

MDN 说

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

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

您可以通过转到终端并输入以下内容来安装 Babel CLI：

$ npm install --save-dev babel-cli

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

【讨论】：

如果我们给 import 语句一行，babelJS 究竟做了什么。这会将其转换为 require 吗？
是的。 ES6 转译器将始终将 ES6 转换为其最新版本的 JavaScript 对应物
这些是什么，分享一下让大家更好理解