简单的 Babel 转译 es6 模块加载

Question

我正在寻找由 babel 转译的 简单 模块加载 import/export es6 模块。

• 从带有 import/export 模块的 es6 源文件开始，以便在浏览器中使用
• 使用 babel 将其静态转换为 es5，配置指定最容易加载的模块转换（amd、commonjs、systemjs）。
• 不要对模块使用 npm，也不要使用任何其他复杂的工作流程。只是 babel 转译的文件。
• 使用模块加载这些 es5 文件，使用 <script> 加载 babel 转译用于加载 es6 模块的库。

我想避免使用 browserify、webpack、jspm 等。只需简单地转译 es6->es5 并使用库 babel 编译模块即可。我不需要捆绑。我们在这里谈论的是简单、基本的 javascript。

这可能吗？如果可以，怎么做？！

我见过的所有模块加载讨论都使用了在我看来没有必要的复杂工作流程。我想简单地在一组文件中使用 es6 import/export，并在浏览器中尽可能简单地使用它们。

Answer 1

看来您可以使用 babel-cli 来做您想做的事。也许像 babel src --out-dir lib.

Answer 2

Guy Bedford 在 SystemJS Google 组中回答了这个问题： https://groups.google.com/forum/?hl=en#!topic/systemjs/a7vB2YmdXp8

这是我给团队的一次演讲，详情在最后： http://backspaces.net/temp/Modules.pdf

简短的版本是：将 babel 配置为具有 babel-plugin-transform-es2015-modules-systemjs，运行 您的模块仅通过此转换即可通过 babel，除非您需要更多 es6 功能（ Chrome 已完成 91%），并让您的 html 包括：

<script src="system.js"></script>
and
<script>
  System.import('lib/main'); 
</script>

没有 webpack、npm/browserify、jspm、捆绑……或任何其他（太多）模块工作流程。