ico*_*ode 4 javascript import export babeljs
我正在尝试使用导入和导出来创建模块，但无法正常工作。
我在index.html标头中添加了https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js并尝试导入js文件并收到一条错误消息，提示SyntaxError：导入声明只能出现在模块的顶层。我可能做错了什么？
我知道我可以使用require.js，而是使用import和export。
的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-standalone 翻译的脚本默认在全局范围内执行，因此它们定义的任何符号都会自动可供其他模块使用。从这个角度来看，您的模块中不需要导入/导出语句。
但是，您可能尝试维护既可以由 babel-standalone 使用（例如，用于快速测试环境、功能演示等）也可以通过 webpack 等捆绑程序使用的源文件。在这种情况下，您需要保留导入和导出语句以实现兼容性。
使其工作的一种方法是在全局范围中添加额外的符号，导致 babel 生成的导入和导出代码不起作用（而不是像通常那样导致错误）。例如，导出语句被编译成如下所示的代码：
Object.defineProperty (exports, "__esModule", {
value: true
});
exports.default = MyDefaultExportedClass;
如果不存在名为“exports”的现有对象，则会失败。因此，给它一个：我只是给它一个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;`
这大致就是我们想要的。
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>
我收到以下错误：
未捕获的ReferenceError：require未定义
来自Babel Docs：
在浏览器中进行编译的用例非常有限，因此，如果您在生产站点上工作，则应在服务器端预编译脚本。有关更多信息，请参见设置构建系统。
大多数人选择Webpack或Rollup之类的预编译模块捆绑器。
如果您确实要执行此客户端，请通过插件使用Basbel运行RequireJS一起使用，尽管您可能需要使用AMD语法。
ES6模块的本机浏览器支持仍处于早期阶段。但是据我所知，Babel还没有可用的预设/插件来告诉它不要转换import/export语句。