在使用 Babel 进行代码转换时，如果遇到“SyntaxError: Cannot use import statement outside a module”错误，一般是因为 Babel 的默认设置是将所有编译后的文件都输出为 CommonJS 规范的代码，但是使用了 ES6 的模块化语法 import/export。
问题分析
这个错误发生的原因是因为在 CommonJS 规范下，只有 require 方法可以加载模块，而不能使用 import/export 语法。因此，如果我们希望使用 ES6 的模块化方式，我们需要更改 Babel 的默认设置。
解决方案
我们可以通过安装 @babel/preset-env 和 @babel/plugin-transform-modules-commonjs 这两个插件来解决这个问题。
@babel/preset-env 是一个可以根据当前的运行环境来自动配置 Babel 插件的预设，它可以将 ES6、ES7 和 ES8 代码转换为 ES5 代码，同时也支持按需引入 polyfill。
@babel/plugin-transform-modules-commonjs 则是将 ESmodules写法转化为commonjs写法的转化器。
实际示例
首先，安装 Babel 和需要用到的插件：
--- ------- ---------- ---------------- ------------------------ ---------------------------------------- ----------
接下来，在 .babelrc 配置文件中配置以上插件：
-
---------- -
-
------
-
---------- ------
---------- -
----------- -
----- - ----------
------- -- --
-
-
-
--
--------------------------
--
---------- --------------------------------------------
-这里的 "modules": false 表示不使用 Babel 的模块转换功能，而是使用浏览器原生的 ES6 模块功能，通过 "@babel/plugin-transform-modules-commonjs" 插件实现对应的 CommonJS 规范的转换即可。
这样，就解决了“SyntaxError: Cannot use import statement outside a module”这个错误了。
总结
以上就是解决 Babel 编译出现 “SyntaxError: Cannot use import statement outside a module”错误的方法。实际开发中，在使用 Babel 的转换功能时，我们还需要结合自己的需求去选择和配置对应的插件和预设，以便让 Babel 更好地适应我们的项目和运行环境。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b2559e48841e9894e96769