建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Javascript中的CJS、AMD、UMD和ESM是什么？
一開始，Javascript 沒有辦法導入/導出模塊。這是個問題。想象一下，在一個文件中編寫您的應(yīng)用程序 - 這將是一場噩夢!
創(chuàng)新互聯(lián)公司2013年至今，先為忠縣等服務(wù)建站，忠縣等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為忠縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
然后，比我聰明得多的人試圖為 Javascript 添加模塊化。其中一些是CJS、AMD、UMD 和 ESM。您可能聽說過其中一些(還有其他方法，但這些是大玩家)。
我將介紹高級信息：語法、目的和基本行為。我的目標是幫助讀者在看到它們時認出。
CJS
CJS 是 CommonJS 的縮寫。這是它的樣子：
- //importing
- const doSomething = require('./doSomething.js');
- //exporting
- module.exports = function doSomething(n) {
- // do something
- }
- 你們中的一些人可能會立即從 node.js 中識別出 CJS 語法。那是因為 node使用 CJS 模塊格式。
- CJS 同步導入模塊。
- 可以從庫node_modules或本地目錄導入。無論是通過const myLocalModule = require('./some/local/file.js')還是 var React = require('react'); 都可以。
- 當 CJS 導入時，它會給你一個導入對象的副本。
- CJS 在瀏覽器中不起作用。它必須被轉(zhuǎn)譯和打包。
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 異步導入模塊(因此得名)。
- AMD 是為前端設(shè)計的(當它被提出時)(而 CJS 后端)。
- AMD 語法不如 CJS 直觀。我認為 AMD 是 CJS 的完全相反的兄弟。
UMD
UMD 代表通用模塊定義。這是它的樣子(來源)：
- (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;
- }));
- 適用于前端和后端(因此得名Universal)。
- 與 CJS 或 AMD 不同，UMD 更像是一種配置多個模塊系統(tǒng)的模式。
- UMD 通常在使用 Rollup/Webpack 等打包器時用作回退模塊
ESM
ESM 代表 ES 模塊。實現(xiàn)標準模塊系統(tǒng)是 Javascript 的建議。相信很多人都看過這個：
- import React from 'react';
其他情況
- import {foo, bar} from './myLib';
- ...
- export default function() {
- // your Function
- };
- export const function1() {...};
- export const function2() {...};
- 適用于許多現(xiàn)代瀏覽器
- 它兼具兩全其美：類似 CJS 的簡單語法和 AMD 的異步
- Tree-shakeable，由于 ES6 的靜態(tài)模塊結(jié)構(gòu)
- ESM 允許像 Rollup 這樣的打包器刪除不必要的代碼，允許站點發(fā)送更少的代碼以獲得更快的加載。
可以在 HTML 中調(diào)用，只需執(zhí)行以下操作：
這可能無法在所有瀏覽器中 100% 工作。
概括
- ESM 是最好的模塊格管理式，這要歸功于其簡單的語法、異步性質(zhì)和 tree-shakeability。
- UMD 隨處可用，通常用作 ESM 不起作用時的后備方案
- CJS 是同步的，有利于后端。
- AMD 是異步的，適合前端。
感謝閱讀。
本文由聞數(shù)起舞翻譯自Igor Irianto的文章《What Are CJS, AMD, UMD, and ESM in Javascript?》，轉(zhuǎn)載請注明出處，原文鏈接：
https://irian.to/blogs/what-are-cjs-amd-umd-and-esm-in-javascript/
【責任編輯：趙寧寧 TEL：（010）68476606】
本文名稱：Javascript中的CJS、AMD、UMD和ESM是什么？
文章出自：http://www.5511xx.com/article/djcidec.html
