javascript - ES6 转译器中的导入/导出

标签 javascript google-chrome ecmascript-6 transpiler

<分区>

This is not a duplicate of below questions which is dealing with browser specific questions. I'm expecting an answer whether import / export will work in Client side or not.

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

Error that I'm getting in Chrome:

Tested Browser: Google Chrome Version 47.0.2526.106

是否可以使代码在任何浏览器中工作或不工作？
比方说，我们选择了一个转译器 (BabelJS) 并转译了代码。 import/export 文件代码片段将在客户端或服务器端工作(在节点服务器中作为 require 方法)？

最佳答案

MDN说

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or 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

关于javascript - ES6 转译器中的导入/导出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34572290/

上一篇：javascript - HTTP Basic Auth 中的自定义 HTML 登录表单

下一篇：javascript - 需要禁用 Bootstrap 时间选择器的输入

相关文章：

css - Chrome 在设置后稍微改变了 RGBA 颜色的 alpha 值

javascript - 如何在运行脚本之前等待页面完成所有内容的加载或如何最好地检测主要的 DOM 更改

javascript - 如何用单一功能在单页面中实现多类型元素

javascript - 从 h1 标签获取链接并使图像可下载

javascript - 如何判断选项卡名称何时更改？

javascript - 如何使用 JS promises 捕获异步错误？

javascript - VSCode 将逗号分隔值分成行

javascript - 在 ES2015 中定义一个类，构造函数方法是什么？为什么它是必不可少的？

javascript - Sinon.js- 试图监视 console.log 但它已经被包裹

javascript - jQuery/JavaScript 如何处理绑定(bind)到同一元素和事件的多个事件处理程序，结果是什么？