RequireJS 和 require('xxx') 有什么关系吗？

Question

RequireJS 和 require('xxx') 有什么关系吗？

我们知道在node.js中是可以直接使用require()来引入模块的。说明node.js中的话,require是内置的。如果RequireJS提供了require()方法，那么一般我们还经常看到RequireJS，这个有什么额外的用处吗？

Answer 1

简短解释：RequireJS是十多年前JS还缺少模块系统时的产物，方便在浏览器项目里管理JS的依赖和加载。随着ES Modules规范的推出，流行前端打包工作流（比如webpack、rollup、esbuild）之后，RequireJS已经不再流行，很少在新项目里使用了。

---

RequireJS是异步模块加载器的一个实现，主要是给浏览器环境里用的。因为浏览器通过网络加载js文件，不像node.js通过硬盘加载那样快速稳定，所以需要使用异步方式来加载。这就出现了不同于node.js的CommonJS的模块规范，也就是异步模块（Asynchronous Module Definition，简称AMD）。

CommonJS的模块是这样的：

var $ = require('jquery');
exports.myExample = function () {};

AMD的模块是这样的：

define(['jquery'] , function ($) {
    return function () {};
});

有时候我们想让一个模块能同时在两个环境里使用，于是就有了UMD规范：

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "jquery"], factory);
    }
})(function (require, exports) {
    exports.myExample = function () {};
});

看到上面这么多代码，不要被吓到了，因为我们现在有前端打包工作流，可以自动生成以上代码，不需要自己手写。

我们现在应该使用ES Modules。

ES Modules是JS的模块规范，浏览器已经原生支持，还能借助工具转译成其他规范，能适应更多场景。

import $ from 'jquery';
export const myExample = () => {};

Answer 2

可以参考这篇文章CJS, AMD, UMD, ESM, System 和 IIFE 分别代表什么——用 Rollup 示例来说明模块格式