前面我们学习了为什么前端需要模块化,并且提到目前使用前端模块化的一些方案:AMD、CMD、CommonJS、ES6。
在 ES6 之前,我们必须借助其他工具来进行模块化开发,开发完成后还需要处理模块间的各种依赖,并将其进行整合打包。
webpack 其中一个核心就是让我们可能进行模块化开发,并帮助我们处理模块间的依赖关系。
而且不仅是 JavaScirpt 文件,我们的 CSS、图片、json 文件等在 webpack 中都可以被当做模块来使用。
参考链接:webpack macOS 安装
新建一个项目,最终目录结构如下:
文件和文件夹解析:
main.js
:
// 使用 CommonJS 的模块化规范
const {
add, mul} = require("./js/mathUtils.js");
console.log(mul(10, 3));
// 使用 ES6 的模块化规范
import {
name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,mul
}
info.js
:
export const name = 'puppy';
export const age = 6;
export const height = 55;