Webpack入门，模块打包之CommonJS简介

CommonJS

说到前端的模块，不得不讲一下CommonJS。CommonJS是由JavaScript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。Node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整。真正的CommonJS模块和Node.js中实现并不完全一样，通常情况下，谈到的CommonJS其实是Node.js中的版本，而非它的原始定义。

CommonJS最初只为服务端而设计，直到有了Browserify——一个运行在Node.js环境下的模块打包工具，它可以将CommonJS模块打包为浏览器可以运行的单个文件。这意味着客户端的代码也可以遵循CommonJS标准来编写了。

何为模块

模块之于程序，就如同细胞之于生物体，是具有特定功能的组成单元。不同的模块负责不同的工作，它们以某种方式联系在一起，共同保证程序的正常运转。

CommonJS中规定每个文件是一个模块。将一个JavaScript文件直接通过script标签插入页面中于封装成CommonJS模块最大的区别在于，前者的顶层作用域是全局作用域，而进行变量及函数声明时会污染全局变量；而后者会形成一个属于模块自身的作用域，所有的变量及函数只有自己能访问，对外是不可见的。

举例为证

在工程中新建calculator.js文件与index.js文件

// calculator.js
var name = "calculator.js";

// index.js
var name = "index.js";
require("./calculator.js");
console.log(name);

这里有两个文件，在index.js中通过CommonJS的require函数加载calculator.js。运行之后控制台输出结果是“index.js”，说明calculator.js中的变量声明并不会影响index.js，可见每个模块是拥有各自的作用域的。

导出

导出是一个模块向外暴露自身的唯一方式。在CommonJS中，通过module.exports可以导出模块中的内容。

// calculator.js
module.exports = {
  name: "calculator",
  add: function(a,b) {
    return a + b;
  }
}

CommonJS模块内部会用一个module对象存放当前模块的信息，可以理解成在每个模块的最开始定义了以下对象：var module = {...}; module.exports = {...}

module.exports用来指定该模块要对外暴露的哪些内容，在上面的额代码中导出了一个对象，包含name和add两个属性。为了书写方便，CommonJS也支持另外一种简化的导出方式——直接使用exports

exports.name = "calculator.js";
exports.add = function(a,b) {
  return a + b;
}

在实际效果上，这段代码和上面的module.exports没有任何不同。其内在机制是将exports指向module.exports，而module.exports在初始化时是一个空对象。可以简单的理解为，CommonJS在每个模块的首部默认添加了以下代码

var module = {
  exports: {}
};
var exports = module.exports;

因此，为exports.add赋值相当于在module.exports对象上添加一个属性。

注意事项
在使用exports时，不要直接给exports赋值，否则会导致其失效。
不要混合使用module.exports与exports

导入

在commonJS中使用require语法进行模块导入。

// calculator.js
module.exports = {
  add: function(a,b) {
    return a + b;
  }
}

// index.js
const calculator = require("./calculator.js");
const sum = calculator.add(5,7);
console.log(sum);

在index.js中导入了calculator模块，并调用了它的add函数。

使用require导入一个模块时会有两种情况：

该模块未曾被加载过。这时会首先执行该模块，然后获取到该模块最终导出的内容。
该模块已经被加载过。这时该模块的代码不会再次执行，而是直接获取该模块上一次导出的内容。

有时在加载一个模块时，不需要获取其导出的内容，只是想要通过执行它而产生某种作用，比如把它的接口挂在全局对象上，此时直接使用require即可。

require函数可以接收表达式，借助这个特性我们可以动态地指定模块加载路径。

const moduleNames = ["foo.js","bar.js"];
moduleNames.forEach(name => {
  require('./' + name);
})

示例代码仓库
https://gitee.com/zero_79152105/webpack-vblog

原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-module-commonjs.html

Webpack入门，模块打包之CommonJS简介

CommonJS

何为模块

导出

导入

相关推荐