JavaScript模块化原理浅析

慕晨同学
5,186 阅读5分钟

文章首发于：github.com/USTB-musion…

写在前面

模块化简单来说就是是指把一个复杂的系统分解到多个模块以方便编码。JS模块化的大致流程为：CommonJS（服务端） -> AMD（浏览器端）-> UMD（兼容了CommonJS和AMD） -> ES Module（ES6标准）。本文将从它们的用法进行介绍，简单实现其原理。并简易实现一个模块化打包工具webpack。

本文将从以下几部分进行总结：

  1. CommonJS的用法及原理
  2. AMD的用法及原理
  3. ES2015标准化
  4. 自动化构建
  5. 简易实现webpack

CommonJS

CommonJS 是一种使用广泛的JavaScript模块化规范，核心思想是通过require方法来同步地加载依赖的其他模块，通过 module.exports 导出需要暴露的接口。

CommonJS的用法

采用CommonJS来进行导入导出的代码用法如下：

// 用require方法导入
const someFun= require('./moduleA');
someFun();

// 用module.exports导出
module.exports = someFunc;

CommonJS原理

a.js：

console.log('aaa');
exports.name = '这是a模块的内容';

b.js：

let fs = require('fs');
let path = require('path');
let b = req('./a.js');
// req即使CommonJS中的require方法
function req(mod) {
    let filename = path.join(__dirname, mod);
    let content = fs.readFileSync(filename, 'utf8');
    /**
       * 最后一个参数是函数的内容体,相当于以下函数
       *function fn(exports, module, require, __dirname, __filename) {
       *  module.exports = '这是另外一个文件导出的内容'
       *  return module.exports
       *}
    */
    let fn = new Function('exports', 'require', 'module', '__filename', '__dirname', content + '\n return module.exports;');
    let module = {
        exports: {}
    };

    return fn(module.exports, req, module, __filename, __dirname);
}

AMD

AMD 也是一种 JavaScript 模块化规范，与 CommonJS 最大的不同在于它采用异步的方式去加载依赖的模块。 AMD 规范主要是为了解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs。

AMD 的优点：

  • 可在不转换代码的情况下直接在浏览器中运行
  • 可加载多个依赖
  • 代码可运行在浏览器环境和 Node.js 环境下

AMD 的缺点：

  • JavaScript 运行环境没有原生支持 AMD，需要先导入实现了 AMD 的库后才能正常使用。
// 使用define方法定义一个模块
define('a', [], function () {
    return 'a';
});
define('b', ['a'], function (a) {
    return a + 'b';
});
// 使用require来导入和使用
require(['b'], function (b) {
    console.log(b);
});

AMD的原理

let factories = {};
/**
 * 实现AMD的define方法
 * @param moduleName 模块的名字
 * @param dependencies 依赖
 * @param factory 工厂函数
*/
function define(modName, dependencies, factory) {
    factory.dependencies = dependencies;
    factories[modName] = factory;
}
/**
 * 实现AMD的require方法
 * @param mods 引入的模块
 * @param callback 回调函数
 */
function require(modNames, callback) {
    let loadedModNames = modNames.map(function (modName) {
        let factory = factories[modName];
        let dependencies = factory.dependencies;
        let exports;
        require(dependencies, function (...dependencyMods) {
            exports = factory.apply(null, dependencyMods);
        });
        return exports;
    })
    callback.apply(null, loadedModNames);
}

ES2015模块化

ES2015 模块化是ECMA提出的JavaScript模块化规范，它在语言的层面上实现了模块化。浏览器厂商和Node.js 都宣布要原生支持该规范。它将逐渐取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。 采用 ES2015 模块化导入及导出时的代码如下:

// 使用import导入
import { name } from './person.js';

// 使用export导出
export const name = 'musion';

ES2015模块虽然是终极模块化方案，但它的缺点在于目前无法直接运行在大部分 JavaScript 运行环境下，必须通过构建工具转换成标准的 ES5 后才能正常运行。

自动化构建

自动化构建就是做这件事情，把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容：

  • 代码转换：ECMASCRIPT6 编译成 ECMASCRIPT5、LESS 编译成 CSS 等。
  • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
  • 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack

webpack 是一个打包模块化 JavaScript 的工具，在 webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

一切文件： JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

webpack简单揭秘

用webpack来进行打包构建的时候，查看打包📦之后的文件，删掉多余的代码，剩下的核心代码如下：

(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        // moduleId -> 模块的名字
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;

    }
    return require("./index.js");
}) ({
    "./index.js":
    (function (module, exports, require) {
        eval("console.log('hello');\n\n");
    })
});

简易实现一个webpack

#! /usr/bin/env node
// 这个文件用来描述如何打包
const pathLib = require('path');
const fs = require('fs');
let ejs = require('ejs');
let cwd = process.cwd();
let { entry, output: { filename, path } } = require(pathLib.join(cwd, './webpack.config.js'));
let script = fs.readFileSync(entry, 'utf8');
let bundle = `
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;

    }
    return require("<%-entry%>");
})
    ({
        "<%-entry%>":
            (function (module, exports, require) {
                eval("<%-script%>");
            })
    });
`
let bundlejs = ejs.render(bundle, {
    entry,
    script
});
try {
    fs.writeFileSync(pathLib.join(path, filename), bundlejs);
} catch (e) {
    console.error('编译失败 ', e);
}
console.log('compile sucessfully!');

依赖其它模块的情况

#! /usr/bin/env node
// 这个文件用来描述如何打包
const pathLib = require('path');
const fs = require('fs');
let ejs = require('ejs');
let cwd = process.cwd();
let { entry, output: { filename, path } } = require(pathLib.join(cwd, './webpack.config.js'));
let script = fs.readFileSync(entry, 'utf8');
let modules = [];
script.replace(/require\(['"](.+?)['"]\)/g, function () {
    let name = arguments[1];
    let script = fs.readFileSync(name, 'utf8');
    modules.push({
        name,
        script
    });
});
let bundle = `
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;
    }
    return require("<%-entry%>");
})
    ({
        "<%-entry%>":
            (function (module, exports, require) {
                eval(\`<%-script%>\`);
            })
       <%if(modules.length>0){%>,<%}%>
        <%for(let i=0;i<modules.length;i++){
            let module = modules[i];%>   
            "<%-module.name%>":
            (function (module, exports, require) {
                eval(\`<%-module.script%>\`);
            })
        <% }%>    
    });
`
let bundlejs = ejs.render(bundle, {
    entry,
    script,
    modules
});
try {
    fs.writeFileSync(pathLib.join(path, filename), bundlejs);
} catch (e) {
    console.error('编译失败 ', e);
}
console.log('compile sucessfully!');

参考资料

精读 js 模块化发展

珠峰前端架构师课程

补充阅读

JavaScript 模块化七日谈

JavaScript模块化编程简史（2009-2016）

你可以关注我的公众号「慕晨同学」，鹅厂码农，平常记录一些鸡毛蒜皮的点滴，技术，生活，感悟，一起成长。

avatar
文章
阅读
粉丝

友情链接：