[Интервью] Что такое CJS, AMD, UMD и ESM в Javascript?

внешний интерфейс JavaScript
[Интервью] Что такое CJS, AMD, UMD и ESM в Javascript?

Оригинальный адрес:What are CJS, AMD, UMD, and ESM in Javascript?

Оригинальный автор:Igor Irianto

Переводчик:Gopal

Поскольку этот вопрос часто задают в интервью, добавляется ярлык [Говорит интервью].

исходный,JavascriptНет возможности импортировать/экспортировать модули, что является головной болью. Представьте, что вы пишете приложение всего одним файлом — это кошмар!

Тогда многие люди намного умнее меня пытались датьJavascriptДобавьте модульности. Среди нихCJS,AMD,UMDа такжеESM. Возможно, вы слышали о некоторых из этих методов (есть и другие, но они более общие).

Я представлю их: их синтаксис, назначение и базовое поведение. Моя цель — помочь читателям узнать их, когда они их увидят.

CJS

CJSдаCommonJSаббревиатура от. Часто мы используем это:

// importing 
const doSomething = require('./doSomething.js'); 

// exporting
module.exports = function doSomething(n) {
  // do something
}
  • Многие люди могут получить отNodeсразу узналCJSсинтаксис. Это потому чтоNodeэто использоватьCJSмодульиз
  • CJSмодуль синхронного импорта
  • ты можешь начатьnode_modulesИмпортируйте библиотеку из или импортируйте файл из локального каталога. Такие какconst myLocalModule = require('./some/local/file.js')илиvar React = require('react');, оба могут работать
  • когдаCJSПри импорте он даст вам копию импортированного объекта
  • CJSНе работает в браузере. это должно быть преобразовано и упаковано

AMD

AMDПредставляет определение асинхронного модуля. Ниже приведен пример кода

define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    return function () {};
});

или

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
    var dep1 = require('dep1'),
        dep2 = require('dep2');
    return function () {};
});
  • AMDасинхронный (asynchronously) импорт модуля (отсюда и название)
  • При первом предложении,AMDсделан для передней части (в то время какCJSэто бэкенд)
  • AMDсинтаксис не так хорош, какCJSИнтуитивно понятный. я думаюAMDа такжеCJSполностью противоположный

UMD

UMDозначает общее определение модуля (Universal Module Definition). Вот как это может выглядеть(источник)

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["jquery", "underscore"], factory);
    } else if (typeof exports === "object") {
        module.exports = factory(require("jquery"), require("underscore"));
    } else {
        root.Requester = factory(root.$, root._);
    }
}(this, function ($, _) {
    // this is where I defined my module implementation

    var Requester = { // ... };

    return Requester;
}));
  • Работает как на фронтенде, так и на бэкенде (отсюда и название «универсальный»)
  • а такжеCJSилиAMD 不同，UMDБольше похоже на шаблон для настройки многомодульных систем.здесьМожно найти больше шаблонов
  • когда используешьRollup/Webpackупаковщики, такие какUMDОбычно используется как запасной модуль

ESM

ESMпредставлятьESмодуль. ЭтоJavascriptПредложена схема реализации стандартной модульной системы. Я уверен, что многие из вас видели это:

import React from 'react';

или больше

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};

<script type="module">
  import {func1} from 'my-lib';

  func1();
</script>

Но не все браузеры поддерживают (источник)

Суммировать

  • из-заESMИмеет простой синтаксис, асинхронные функции и древовидную структуру, поэтому это лучшее модульное решение.
  • UMDвстречается повсеместно, обычно вESMИспользуйте в качестве резервной копии, если это не работает
  • CJSявляется синхронным, подходит для бэкенда
  • AMDасинхронный, подходит для фронтенда

Спасибо за прочтение, разработчики! В будущем я планирую подробно обсудить каждый модуль, особенно ESM, так как он содержит много отличных вещей. Пожалуйста, не переключайтесь!

Пожалуйста, дайте мне знать, если вы заметили какие-либо ошибки.

Ссылаться на

Категории