阅读 3077

什么是amd、commonjs、umd、esm

什么是amd、commonjs、umd、esm?

之前,js不能引入三方模块,所有的代码必须写到一个文件中,导致单个文件代码量大、业务功能模块不清晰、难于维护。而编写模块化代码,有助于使您的代码变得松散耦合,这对于构建可维护的表示工程代码大有帮助。基于此,越来越多的模块规范出现,如commonjs、amd、umd、esm.

amd(Asynchronous Module Definitions)规范因RequireJS而出名,其适用于浏览器端,commonjs常被用于node中,当然其也可通过Browserify用于浏览器中。

amd

其用法如下:

    // 文件名: foo.js
    define(['jquery'], function ($) {
        //    方法
        function myFunc(){};

        //    暴露公共方法
        return myFunc;
    });
复制代码

定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。

理想状态下,期望其依赖是异步加载的,通过在中注入script,不阻塞浏览器的加载和渲染,但实际环境下,其表现的没有那么好,因此需要amd 模块为一个单文件模块并与require.js 优化器配合来进行渲染

总结如下:

  • 异步加载
  • 其被提出,主要用于客户端browser
  • 其语法不直观,没有commonjs便于书写

commonjs

如果你用node写过东西的话,你可能会很熟悉commonjs风格,其用法如下:

  //    文件名: foo.js
  //    依赖
  var $ = require('jquery');
  //    方法
  function myFunc(){};

  //    暴露公共方法(一个)
   module.exports = myFunc;

复制代码

总结如下:

  • 语法类似于node,因为node使用commonjs规范
  • commonjs导入模块是同步导入
  • 主要用于后端,客户端用的话需要通过Browserify
  • 书写直观

umd

其是amd和commonjs的统一规范,支持两种规范,即写一套代码,可用于多种场景。其用法如下:

(function (root, factory) {
            if (typeof define === 'function' && define.amd) {
                // AMD
                define(['jquery'], factory);
            } else if (typeof exports === 'object') {
                // Node, CommonJS之类的
                module.exports = factory(require('jquery'));
            } else {
                // 浏览器全局变量(root 即 window)
                root.returnExports = factory(root.jQuery);
            }
        }(this, function ($) {
            //    方法
            function myFunc(){};

            //    暴露公共方法
            return myFunc;
        }));
复制代码

毋庸置疑的是,其写法也是最复杂的

  • 前后端均通用
  • 与CJS或AMD不同,UMD更像是一种配置多个模块系统的模式。
  • UMD在使用诸如Rollup/ Webpack之类的bundler时通常用作备用模块

ESM

ESM是ES6提出的标准模块系统,相信大家都用过

import React from 'react';
复制代码
  • 很多浏览器开始支持
  • 拥有类似commonjs的写法和同、异步加载机制
  • 能通过设置type=module,用于html中
  • node也开始支持

相信未来esm是趋势。

完!

水平有限

如有理解错误之处,请指正~

参考链接:

dev.to/iggredible/…

www.linkedin.com/pulse/amd-v…

[75.team/post/译神马是am…](

文章分类
前端
文章标签