我正在尝试使用导入和导出来创建模块，但它不起作用。
我在 index.html 标头中添加了 https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js，并尝试导入一个 js 文件并收到一条错误消息，指出语法错误：导入声明可能只出现在模块的顶层。我可能做错了什么？
我知道我可以使用require.js而是使用导入和导出。
.HTML
script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script
JS文件
import Mymodule from './modules/mymodule';
Babel 无法执行模块的客户端转译，或者更确切地说，浏览器并不普遍支持它。事实上，除非你使用插件，否则 Babel 会import转换为require()。
如果我运行以下代码：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script defer type="text/babel" data-presets="es2015">
import Mymod from './modules/module';
Mymod();
</script>
</head>
我收到以下错误：
未捕获的引用错误：未定义要求
来自 Babel Docs：
在浏览器中编译的用例相当有限，因此如果您在生产站点上工作，则应在服务器端预编译脚本。有关详细信息，请参阅设置构建系统。
大多数人选择预编译的模块捆绑器，如 Webpack 或 Rollup。
如果你真的想执行这个客户端，请使用 RequireJS 和 Babel 通过插件运行，尽管你可能需要使用 AMD 语法。
ES6模块的原生浏览器支持仍处于早期阶段。但据我所知，Babel 还没有可用的预设/插件来告诉它不要转换import/export语句。
babel-standalone 翻译的脚本默认在全局范围内执行，因此它们定义的任何符号都自动可用于其他模块。 从这个角度来看，模块中不需要导入/导出语句。
但是，您可能正在尝试维护既可以由 babel-独立使用(例如用于快速测试环境、功能演示等)也可以通过捆绑器(如 webpack)使用的源文件。 在这种情况下，您需要将导入和导出语句保留在那里以实现兼容性。
使其工作的一种方法是在全局范围内添加额外的符号，这些符号会导致 babel 生成的导入和导出代码不起作用(而不是像通常那样导致错误)。 例如，export 语句被编译成如下所示的代码：
Object.defineProperty (exports, "__esModule", {
value: true
});
exports.default = MyDefaultExportedClass;
如果没有名为"export"的现有对象，这将失败。 所以给它一个：我只是给它一个window对象的副本，所以任何被定义的有趣的东西仍然可以访问：
<script>
// this must run before any babel-compiled modules, so should probably
// be the first script in your page
window.exports = window;
import语句转换为对require()的调用。 结果(或从中提取的属性)将分配给在 import 语句中用作标识符的变量。 默认导入有点复杂，这取决于require()的结果是否包含属性__esModule。 如果没有，事情会更容易(但是您不能支持在同一模块中同时使用默认导出和命名导出......如果你需要这样做，看看 babel 生成的代码并弄清楚如何让它工作)。
所以，我们需要一个工作版本require(). 我们可以通过为导出的符号/符号提供模块名称的静态翻译来提供一个。 例如，在 React 组件的演示页面中，我有以下实现：
function require (module) {
if (module === "react") return React;
if (module === "react-dom") return ReactDOM;
}
对于返回多个符号的模块，只需返回一个包含符号作为属性的对象。
这样，像这样的声明
`import React from "react";`
转换为有效的代码：
`React = React;`
这大致是我们想要的。