Question

我刚开始尝试使用 ES6 ，我已经遇到了 ES6模块。我使用 babeljs 将 ES6 翻译成 ES5 。我的理解是，babel在幕后使用 requirejs 模块加载器来使import发生。

所以我试图设置一个非常基本的模块加载示例，但我无法使其正常工作。

我想将bar.js中的模块导入index.html。这些文件具有相同的父目录。

index.html代码：

<html>
  <head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/babel-standalone@6.22.1/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
  </head>

  <body>
    <script type="text/babel">
      console.log("Here we go.");
      import {foo} from 'bar';
      console.log(typeof foo);
    </script>
  </body>
</html>

bar.js代码：

export function foo() {
    console.log("Foo it!");
}

我收到以下错误：

未捕获错误：尚未为上下文加载模块名称“bar”： _。使用require（[]）

当我在require.min.js中更改babel.min.js和<head>的顺序时，会发生更有趣的事情。这次根本没有执行text/babel脚本（控制台中没有错误）。

有人可以解释一下是什么问题吗？或者这是一种非常糟糕的方法吗？

请不要建议使用像webpack这样的捆绑包。我还不想使用它们。

使用babeljs + requirejs导入ES6模块

0 个答案: