ES6模块怎么用？完整导入导出教程

你在学习文章相关的知识吗？本文《ES6模块怎么用？导入导出代码全教程》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

ES6模块是静态编译期确定依赖的语法结构，import必须位于顶层作用域以构建模块图；动态导入需用import()函数；路径须为显式相对/绝对URL或完整URL，不支持裸模块名和file://协议。

ES6 模块（import/export）不是运行时动态加载的脚本拼接，而是**静态编译期确定依赖关系的语法结构**；浏览器或打包工具必须在执行前解析完所有 import 语句，因此不能用变量、条件或函数调用来控制导入路径。

为什么 import 必须写在顶层作用域

因为模块图构建发生在代码执行之前。JS 引擎需要一次性扫描全部 import 语句，生成模块依赖树。一旦放进 if 或函数里，就破坏了这种静态可分析性。

常见错误现象：

• Uncaught SyntaxError: Cannot use import statement outside a module（没加 type="module"）
• Uncaught SyntaxError: Unexpected token 'if'（import 写在 if 块里）
• Uncaught SyntaxError: Cannot use import statement inside a function

正确做法：

• HTML 中引入脚本时加上 type="module"：

  <script type="module" src="./main.js"></script>

• import 只出现在文件最外层（顶层作用域），不能嵌套
• 动态导入用 import() 函数（返回 Promise），它才是运行时可条件调用的

export 的三种写法和对应 import 方式

导出方式决定导入时能否重命名、是否必须解构、是否支持默认导出。混用会导致 undefined 或 unexpected token 错误。

示例对比：

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }

对应导入方式：

• 命名导出必须用大括号：import { PI, add } from './math.js';
• 默认导出不加括号，可任意重命名：import multiply from './math.js'; 或 import calc from './math.js';
• 同时导入命名 + 默认：import multiply, { PI, add } from './math.js';
• 全部导入为命名空间对象：import * as math from './math.js'; → math.PI, math.default(2, 3)

路径必须是相对或绝对 URL，不能省略扩展名

ES6 模块规范要求 import 路径是**有效的模块说明符（module specifier）**，浏览器不支持 Node.js 那套自动解析规则（如省略 .js、查找 index.js、读取 package.json 的 main 字段）。

常见错误：

• Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain".（服务器没返回 application/javascript）
• Failed to load module script: The server responded with a non-JavaScript MIME type.（路径指向 HTML 或 404）
• TypeError: Failed to resolve module specifier "utils"（没写 ./utils.js，用了裸模块名）

可行路径写法：

• import { foo } from './utils.js';（推荐：显式后缀）
• import { foo } from '/src/utils.js';（绝对路径，从根开始）
• import { foo } from 'https://cdn.example.com/lib.js';（完整 URL）

注意：Node.js 环境下可通过 "type": "module" 在 package.json 中启用 ESM，但依然不支持裸模块名，除非配合 import maps 或打包工具。

开发中绕不开的两个现实约束

纯浏览器环境直接使用 ES6 模块，会遇到两个硬限制：

• 无法直接导入 node_modules 下的包（比如 import _ from 'lodash' 会失败）
• 无法在本地 file:// 协议下运行（浏览器禁止跨源请求，会报 CORS 错误）

所以实际项目中：

• 要么用 import map 显式映射裸模块名到 URL（仅现代浏览器支持）
• 要么用 Vite / Webpack / esbuild 等工具打包，把模块转成可执行格式并注入路径解析逻辑
• 本地开发务必起一个 HTTP 服务（npx serve、vite、python3 -m http.server）

模块不是“即插即用”的胶水，它是语言级的依赖契约——写错路径、搞混导出类型、忽略协议限制，都会在加载阶段立刻失败，没有回退机制。

好了，本文到此结束，带大家了解了《ES6模块怎么用？完整导入导出教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！