JavaScript 模块化规范 (一) | CommonJS

  • JavaScript
  • 2020-05-17 16:52:09
  • 浏览 137
简介JS模块化规范是现代前端自动化开发的基础知识,了解或熟练应用,将在日后的开发工作中有很大的帮助

概述

Node 应用由模块组成,采用 CommonJS 模块规范。

每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。require方法用于加载模块。

CommonJS的服务端应用

编写模块 module1

module.exports = {
    msg: 'hello world',
    say() {
        console.log(this.msg);
    }
}

编写模块 module2

exports.arr = [0, 5, 1, 3, 5, 2, 9, 6, 7, 4]

编写 app.js

let uniq = require('uniq');
let module1 = require('./modules/module1');
let module2 = require('./modules/module2');

console.log(module1);
console.log(module2);

console.log(uniq(module2.arr))

引入项目中的模块需要指定相对路径,引入第三方模块只需要写模块名称即可。
在 NodeJS 环境下,可以直接使用 node xxx.js 的方式直接运行。

node app.js

输出如下

CommonJS的浏览器端应用

由于浏览器不能直接识别module.exportsrequire,需要借助一个工具,将代码转化为浏览器可以执行的代码,安装 browserify

npm install -g browserify

使用命令将代码转换为浏览器可以执行代码

browserify src/app.js -o dist/bundle.js

新建 HTML 文件并引入 bundle.js 文件,用浏览器打开该 HTML 文件

代码仓库

https://github.com/365D1/javascript-modules.git

文章评论