【前端】90%程序员踩过的坑！CommonJS到ES6模块化避坑全攻略
前言
🍊缘由
CommonJS与ES6导入导出，前端模块化的“武林秘籍”
🐣闪亮主角
大家好，我是JavaDog程序狗。
在前端开发的江湖里，模块化是提升代码可维护性和复用性的重要法宝。而CommonJS和ES6的导入导出机制，就像是这法宝中的两把利刃，各自有着独特的招式和威力。
但很多小伙伴在使用它们时，常常会陷入困惑，就像在迷雾中找不到方向。今天，狗哥就带大家一起揭开这两种导入导出机制的神秘面纱。
😈你想听的故事
最近狗哥在和前端的小伙伴们交流时，发现大家在处理模块导入导出的问题上，那真是状况百出。
有的小伙伴在CommonJS和ES6的语法中来回横跳，结果代码报错连连；有的则是对两种机制的适用场景傻傻分不清楚。
狗哥一听，这哪行啊，必须得给大家好好说道说道。于是，就有了这篇文章，希望能帮助大家在模块化的江湖中，轻松应对各种挑战。
正文
🎯主要目标
1.了解 CommonJS 和 ES6 中导入导出的概念和区别
2.掌握在不同场景下使用 CommonJS 和 ES6 导入导出的实践操作
🍪目标讲解
一. CommonJS 和 ES6 导入导出的概念和区别
1. 什么是 CommonJS 导入导出
CommonJS 是服务器端模块规范，主要用于 Node.js 环境。在 CommonJS 中，每个文件就是一个模块，有自己独立的作用域。模块通过 exports 或 module.exports 来导出内容，使用 require 来导入其他模块。
// 导出示例
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
exports.add = add;
exports.subtract = subtract;
// 导入示例
// main.js
const math = require('./math');
console.log(math.add(2, 3));
2. 什么是 ES6 导入导出
ES6 引入了官方的模块系统，使用 export 和 import 关键字。ES6 模块可以在浏览器和 Node.js 环境中使用（Node.js 需要一些配置）。它有多种导出方式，如命名导出和默认导出。
// 命名导出示例
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// 命名导入示例
// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3));
// 默认导出示例
// person.js
const person = { name: 'John', age: 30 };
export default person;
// 默认导入示例
// main.js
import person from './person.js';
console.log(person.name);
3. 两者的区别
- 语法不同：CommonJS 使用 require 和 exports/module.exports，ES6 使用 import 和 export。
- 加载方式不同：CommonJS 是同步加载模块，适合服务器端；ES6 模块是静态加载，在编译时就确定模块的依赖关系，更适合浏览器环境。
- 作用域不同：CommonJS 模块有自己独立的作用域，而 ES6 模块的作用域是全局的。
二. 在不同场景下使用 CommonJS 和 ES6 导入导出的实践操作
1. 在 Node.js 环境中使用 CommonJS
在 Node.js 中，默认支持 CommonJS 模块规范。我们可以创建多个模块文件，然后在主文件中导入使用。
// utils.js const multiply = (a, b) => a * b; module.exports = { multiply }; // main.js const utils = require('./utils'); console.log(utils.multiply(2, 3));2. 在 Node.js 环境中使用 ES6 模块
从 Node.js v13.2.0 开始，Node.js 支持 ES6 模块。需要将文件扩展名改为 .mjs，或者在 package.json 中添加 "type": "module"。
// math.mjs export const divide = (a, b) => a / b; // main.mjs import { divide } from './math.mjs'; console.log(divide(6, 3));3. 在浏览器环境中使用 ES6 模块
在浏览器中，我们可以直接使用 ES6 模块。需要在 HTML 文件中使用 标签。
import { add } from './math.js'; console.log(add(2, 3));总结
通过对CommonJS 和 ES6 导入导出机制的学习，我们了解了它们的概念、区别以及在不同场景下的使用方法。
在实际开发中，我们可以根据项目的需求和环境来选择合适的模块规范。希望这篇文章能帮助小伙伴们更好地掌握模块化开发，让代码更加简洁、高效。
🍈猜你想问
如何与狗哥联系进行探讨
1. 关注公众号【JavaDog程序狗】
公众号回复【入群】或者【加入】，便可成为【程序员学习交流摸鱼群】的一员，问题随便问，牛逼随便吹，目前群内已有超过360+个小伙伴啦！！！
2.踩踩狗哥博客
javadog.net
里面有狗哥的私密联系方式呦 😘
大家可以在里面留言，随意发挥，有问必答
🍯猜你喜欢
文章推荐
【实操】Spring Cloud Alibaba AI，阿里AI这不得玩一下(含前后端源码)
【规范】看看人家Git提交描述，那叫一个规矩
【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【模块分层】还不会SpringBoot项目模块分层？来这手把手教你！
