引言在现代前端开发中模块化编程已经成为组织代码、管理依赖、提升可维护性的核心手段。ES6ECMAScript 2015正式引入了原生的模块系统通过export和import关键字开发者可以轻松地将代码拆分为多个独立文件实现按需加载和命名空间隔离。对于参加蓝桥杯 Web 开发赛项的选手而言熟练掌握模块化语法是必备技能。无论是省赛中的代码补全题还是国赛中的大型项目开发都会频繁考察模块的导入导出、动态加载以及模块打包工具的基础知识。本文将从实际代码出发系统梳理 ES6 模块化的全部知识点并配套表格与实例帮助读者快速掌握并应用于竞赛实战。一、模块基础与typemodule1.1 模块化代码的引入方式在 HTML 文件中如果需要使用模块化代码script标签必须添加typemodule属性。这样浏览器会将代码视为 ES6 模块支持import/export语法并自动启用严格模式和模块作用域。示例代码!-- 导入外部模块文件 -- script src./a.js typemodule/script !-- 内联模块代码 -- script typemodule import { version } from ./config.js; console.log(version); /script⚠️注意本地直接打开 HTML 文件file://协议会导致 CORS 跨域错误必须通过 HTTP 服务器如Live Server、http-server访问。1.2 模块作用域每个模块都有自己的顶级作用域模块内声明的变量、函数不会污染全局环境。模块之间通过export/import显式共享数据。二、导出Export2.1 命名导出Named Export命名导出可以导出多个变量、函数或类导入时必须使用相同的名称可借助as重命名。语法形式示例说明单独声明导出export const age 20;在声明语句前直接加export集中导出export { age, name };先声明最后统一导出导出时重命名export { age as userAge };对外暴露的名称改为userAge代码实例a.js// 单个命名导出 export var age 20; export function introduce() { console.log(自我介绍); } export const id 1001; // 集中导出 var address JX; var count 100; export { address, count };❌常见错误var a 100; export a; // 错误export 后面必须跟声明或花括号 export { a }; // 正确2.2 默认导出Default Export每个模块最多只能有一个默认导出。默认导出可以是任意值函数、对象、类等导入时可以任意命名。语法形式示例说明直接导出值export default 42;导出一个数字导出函数export default function() {}匿名函数导出对象export default { name, age };常用做法代码实例a.js 续// 默认导出一个对象包含两个方法 const eat () console.log(吃饭); const eat2 () console.log(吃水果); export default { eat, eat2 };技巧默认导出与命名导出可以混合使用。2.3 混合导出Named Default一个模块可以同时包含命名导出和默认导出。代码实例c.jsfunction fun1() { console.log(fun1); } function fun2() { console.log(fun2); } const d 100; const address JX; // 默认导出 export default { fun1, fun2, d, address }; // 命名导出 export var a 777;2.4 导出知识点汇总表导出类型关键字语法示例模块限制导入时匹配规则命名导出exportexport const age 18;无数量限制名称必须一致默认导出export defaultexport default function(){}最多1个可任意命名混合导出两者结合见上例默认1个 命名多个分别按规则匹配重命名导出asexport { age as userAge };无限制使用新名称导入三、导入Import3.1 命名导入Named Import必须使用花括号变量名需与导出的名称完全一致支持重命名。场景语法示例单个导入import { name } from ./module.jsimport { age } from ./a.js多个导入import { name, age } from ./module.jsimport { age, id } from ./a.js重命名导入import { name as newName } from ./module.jsimport { age as userAge } from ./a.js代码实例// 从 a.js 导入命名导出的变量 import { age, id, introduce } from ./a.js; console.log(age); // 20 introduce(); // 自我介绍3.2 默认导入Default Import不使用花括号可任意指定变量名。代码实例// 导入 a.js 的默认导出对象 import myModule from ./a.js; myModule.eat(); // 吃饭 myModule.eat2(); // 吃水果 // 也可以解构默认对象 import { eat, eat2 } from ./a.js; // ❌ 错误默认导出不能用花括号 // 正确方式先默认导入再解构 import defaultObj from ./a.js; const { eat, eat2 } defaultObj;3.3 混合导入Default Named默认导入必须写在前面后面用逗号分隔花括号内的命名导入。语法import 默认变量, { 命名变量 } from ./module.js代码实例// a.js 混合导出默认导出 { eat, eat2 } 命名导出 age, id import defaultObj, { age, id } from ./a.js; defaultObj.eat(); console.log(age, id);✅最佳实践这种写法比分开写更简洁也是蓝桥杯题目中常见的考察方式。3.4 整体导入Namespace Import使用import * as 对象名将模块的所有导出包括默认导出收集到一个对象中。默认导出会作为该对象的default属性。代码实例// 导入 c.js 的所有导出 import * as data from ./c.js; console.log(data); // Module 对象 console.log(data.a); // 777命名导出 console.log(data.default); // { fun1, fun2, d, address }默认导出 data.default.fun1(); // 调用默认导出中的函数3.5 动态导入Dynamic Importimport()函数返回一个 Promise允许在运行时按需加载模块常用于代码分割和懒加载。语法import(模块路径).then(module {...})代码实例// 动态导入 a.js import(./a.js) .then(module { console.log(module); // Module 对象 module.default.eat(); // 调用默认导出方法 console.log(module.id); // 1001命名导出 }) .catch(error { console.error(模块加载失败, error); }); // 结合 async/await async function loadModule() { const module await import(./a.js); module.default.eat(); }蓝桥杯考点动态导入是实现路由懒加载、组件异步加载的核心技术。3.6 导入知识点汇总表导入类型语法适用场景是否解构命名导入import { x } from m精确获取命名导出需要匹配名称默认导入import x from m获取默认导出名称自定义混合导入import x, { y } from m同时获取默认和命名导出默认在前整体导入import * as obj from m获得所有导出含 default对象属性访问重命名导入import { x as y } from m避免命名冲突新名称动态导入import(m)运行时按需加载返回 Promise四、模块注意事项与常见问题4.1 模块路径规则必须以/、./或../开头相对路径或绝对路径。不允许省略扩展名浏览器需要完整文件名如./a.js不能只写./a但构建工具Webpack可配置解析规则。支持 CDN 的 URL 地址。4.2 模块只执行一次无论一个模块被import多少次其代码只会执行一次后续导入都从缓存中获取。4.3 CORS 与 Live Server由于模块加载遵循同源策略直接通过file://打开 HTML 会触发 CORS 错误。必须使用 HTTP 服务器例如 VS Code 的 Live Server 插件。4.4 模块中的this指向在模块顶层this是undefined非模块中是window。4.5 延迟解析与提升模块中的import语句会被提升到模块顶部但实际代码的执行顺序遵循模块依赖图的深度优先遍历。五、蓝桥杯 Web 考点结合与拓展5.1 典型竞赛题目模块化补全题目描述模拟现有两个文件utils.js和main.js请补全代码实现模块导入导出使得main.js可以调用utils.js中的add函数和默认配置对象config。utils.jsexport function add(a, b) { return a b; } const config { theme: dark }; // 请补全默认导出 ______________; // 期望导出 configmain.js// 请补全导入语句使得默认导出的对象命名为 settings ______________ from ./utils.js; console.log(settings.theme); // dark console.log(add(2, 3)); // 5答案// utils.js export default config; // main.js import settings, { add } from ./utils.js;5.2 动态导入实现懒加载性能优化考点蓝桥杯 Web 国赛项目题中常常要求实现按需加载来提升首屏速度。示例点击按钮后才加载大模块button idloadBtn加载图表模块/button script typemodule document.getElementById(loadBtn).addEventListener(click, async () { const chartModule await import(./chart.js); chartModule.renderChart(); }); /script5.3 模块化与打包工具Webpack 基础虽然蓝桥杯一般不要求配置 Webpack但会考察对模块化最终产物bundle的理解。常见考点入口entry与出口output代码分割code splitting与动态导入的关系import()被编译后生成独立的 chunk 文件5.4 模块化与组件化开发Vue/React 基础在 Vue 单文件组件SFC或 React 项目中每个组件本质上就是一个模块// MyButton.jsx (React) export default function MyButton() { ... } // App.jsx import MyButton from ./MyButton.jsx;蓝桥杯 Web 组赛题有时会给出基于 Vue/React 的代码片段要求识别模块导入错误。六、总结与学习建议知识点掌握要求竞赛频率命名导出/导入必须熟练⭐⭐⭐⭐⭐默认导出/导入必须熟练⭐⭐⭐⭐⭐混合导入熟悉写法⭐⭐⭐⭐整体导入了解即可⭐⭐⭐重命名导入导出常用技巧⭐⭐⭐⭐动态导入理解 Promise 用法⭐⭐⭐⭐模块作用域与 CORS避坑必备⭐⭐⭐备赛建议动手实践创建多个.js文件反复练习各种导入导出组合。对比记忆区分命名导入花括号和默认导入无花括号。模拟场景尝试写一个工具库模块如数学计算、DOM 操作然后在主模块中调用。关注蓝桥杯真题近两年真题中模块化常出现在填空题和代码改错题中务必熟悉动态导入的 Promise 写法。最后提醒所有模块化代码都必须在服务器环境下运行推荐使用 VS Code 的 Live Server 一键启动避免 CORS 错误。通过本文的系统学习相信你已经掌握了 ES6 模块化的全部核心语法。模块化不仅是前端工程化的基石也是蓝桥杯 Web 开发赛项的高频得分点。祝你在竞赛中取得优异成绩加油