Javascript 哪些浏览器支持 ECMAScript 6 的导入和导出语法？

Which browsers support import and export syntax for ECMAScript 6?

提问by Gregory R.

I am currently writing a web application using the MEAN Stack, and am attempting to write code in ECMAScript 6 JavaScript; however, I am getting errors in both Chrome and Firefox when using import and export syntax. Are there currently any browsers that fully support ECMAScript 6?

我目前正在使用 MEAN Stack 编写 Web 应用程序，并尝试使用 ECMAScript 6 JavaScript 编写代码；但是，在使用导入和导出语法时，我在 Chrome 和 Firefox 中都遇到了错误。目前是否有完全支持 ECMAScript 6 的浏览器？

Please note: I am not asking when ECMAScript 6 will be supported by browsers. I'm asking which browsers support ECMAScript 6 import and export syntax. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

请注意：我不是问浏览器何时支持 ECMAScript 6。我在问哪些浏览器支持 ECMAScript 6 导入和导出语法。请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

采纳答案by Ginden

Chrome and Firefox support importand exportsyntax (there exists tests for properparsing).

Chrome 和 Firefox 支持import和export语法（存在正确解析的测试）。

What isn't supported is module loading - you can't load module by any means, because specification for it isn't complete. You have to use some kind of module bundler for this. I'm not front-end developer, but I have heard good opinions on Rollupfrom my coworkers.

不支持的是模块加载 - 您不能以任何方式加载模块，因为它的规范不完整。为此，您必须使用某种模块捆绑器。我不是前端开发人员，但我从我的同事那里听到了关于Rollup 的好意见。

回答by Ali

It's supported in:

它支持：

• Safari 10.1
• Chrome 61
• Firefox 54– behind the dom.moduleScripts.enabled setting in about:config.
• Edge 16

• Safari 10.1
• 铬 61
• Firefox 54– 在 about:config 中的 dom.moduleScripts.enabled 设置后面。
• 边缘 16

回答by Stijn de Witt

As others have said, support for it is still very limited. But even if there was full support.... would it be smart to use it? How would we do that?

正如其他人所说，对它的支持仍然非常有限。但即使有充分的支持......使用它是否明智？我们怎么做？

Think about it. A typical JS app written with Node JS modules easily contains dozens, even hundreds of (very small) packages. Do we really want that many requests?

想想看。使用 Node JS 模块编写的典型 JS 应用程序很容易包含数十个甚至数百个（非常小的）包。我们真的想要那么多请求吗？

Browserify, Webpack, Rollup etc are so popular because they allow us to bundle many small packages into one fast download. With code splittingwe can let the module bundler decide at transpilation time, based on the code our pages are actually using and on some configuration settings, how many bundles to create and what to put in each of them. That way we can write many smallpackages and serve them as a (couple of) big bundles.

Browserify、Webpack、Rollup 等如此受欢迎，因为它们允许我们将许多小包捆绑到一个快速下载中。通过代码拆分，我们可以让模块打包器在转换时根据我们的页面实际使用的代码和一些配置设置来决定要创建多少包以及在每个包中放入什么。这样，我们就可以写了许多小的包，并将其作为一个（几个）大捆。

My point is that we should divide our code into packages that work well on a conceptual level, then bundle those packages into bundles that work well on a technical (network) level. If we write our code based on optimum network packet size, we end up sacrificing modularity in the process.

我的观点是，我们应该将我们的代码划分为在概念级别上运行良好的包，然后将这些包捆绑到在技术（网络）级别运行良好的包中。如果我们根据最佳网络数据包大小编写代码，我们最终会在此过程中牺牲模块化。

In the meantime, using it will probably only add to the confusion. For example, look at the example on the Edge blog:

与此同时，使用它可能只会增加混乱。比如看Edge博客上的例子：

import { sum } from './math.js';

Note how they add the extension .jsto the fromstring? In Node JS we usually write this as:

请注意他们如何将扩展名添加.js到from字符串中？在 Node JS 中，我们通常这样写：

import { sum } from './math';

So will the above code also work on Edge? And what about named packages? I fear we will see a lot of incompatibility here before we figure out how to make these paths work across the board.

那么上面的代码也适用于 Edge 吗？那么命名包呢？我担心在我们弄清楚如何使这些路径全面工作之前，我们会在这里看到很多不兼容。

I would hazard to guess that for most developers, System.importwill remain mostly invisible in the browsers and that only the bundling software itself will start to use it (for efficiency purposes) when it becomes mainstream.

我大胆地猜测，对于大多数开发人员来说，System.import在浏览器中几乎不可见，只有捆绑软件本身会在它成为主流时开始使用它（出于效率目的）。

回答by Supersharp

Now there's a pollyfillthat you can use to import ES6 module.

现在有一个pollyfill可以用来导入 ES6 模块。

I tested it successfully on Chrome.

我在 Chrome 上测试成功。

Here is the link: http://github.com/ModuleLoader/browser-es-module-loader

这是链接：http: //github.com/ModuleLoader/browser-es-module-loader

---

---

It is also implemented natively in Edge14:

它也在Edge14 中本地实现：

https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond

https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond

回答by Gregory R.

According to Google's Javascript Style Guide:

根据谷歌的 Javascript 风格指南：

Do not use ES6 modules yet (i.e. the exportand importkeywords), as their semantics are not yet finalized. Note that this policy will be revisited once the semantics are fully-standard.

不要使用 ES6 模块（即export和import关键字），因为它们的语义尚未最终确定。请注意，一旦语义完全标准，将重新考虑此策略。

// Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

However, importand exportare implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.

但是，import并export在许多转译器中实现，例如 Traceur Compiler、Babel 或 Rollup。