umd 和 common 包有什么不同？

  • Z时代
  • 2024-03-07
  • 分类：IT

umd 和 common 包有什么不同？

  1. 在 import 和 require 使用时 umd 和 common 包有什么不同？
  2. 针对全部导入，和部分导入场景。使用时 umd 和 common 包有什么不同？
我考虑既然都不支持按需，是不是两个包用起来就是一样的。除非使用 ESM。
//build.esm.js
export const a = 1;
export const b = 2;
// index-import-1.js
import {a, b} from 'build.esm'
// index-import-2.js
import {a} from 'build.esm'
//build.common.js
module.exports.a = 1;
module.exports.b = 2;
// index-require-1.js
let {a, b} = require('build.common.js')
// index-require-2.js
let {a} = require('build.common.js')

回答：

  1. CommonJS/UMD 压根就没有 import，它是 require；你用 import 就已经是 ESM 了。import 是关键字级别的，需要语言底层本身支持；require 就是个函数罢了，Node.js 为你全局内置了。而在项目里之所以能混着用，是因为有 Node.js 帮你处理了。UMD 就是 AMD + CommonJS + globalThis 大杂烩，跟 ESM 并没有什么关系。
  2. 你这种场景跟 CommonJS/UMD 无关，而是 import 和 require 的区别。前面说了 import 是关键字，是语言底层支持的，所以部分导入真的是“部分”导入；而 require 那种写法实际还是全部导入、外加了一个 ES6 的对象解构赋值而已。ESM 的 import 部分导入语法看着像解构，实际并不是解构。需要注意 Node.js 本身不支持通过 import 部分导入 CommonJS ，只能全部导入，这时就需要 Webpack/Rollup 来抹平差异。所以你看 Tree-Shaking 这种东西首先就要求得是 ESM，因为正如前面所言它才是“真·部分导入”（当然也有插件可以先把 CommonJS 转成 ESM，这样就都能愉快地 Tree-Shaking 了，但你看最后根儿上还得是 ESM）。

以上是 umd 和 common 包有什么不同？ 的全部内容， 来源链接： utcz.com/p/936579.html

回到顶部