极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 前端打包时 cjs、es、umd 模块有何不同

Issue

欢迎在 Issue 中交流与讨论: Issue 475 (opens new window)

# cjs (commonjs)

commonjs 是 Node 中的模块规范,通过 requireexports 进行导入导出 (进一步延伸的话,module.exports 属于 commonjs2)

同时,webpack 也对 cjs 模块得以解析,因此 cjs 模块可以运行在 node 环境及 webpack 环境下的,但不能在浏览器中直接使用。但如果你写前端项目在 webpack 中,也可以理解为它在浏览器和 Node 都支持。

比如,著名的全球下载量前十10的模块 ms (opens new window) 只支持 commonjs,但并不影响它在前端项目中使用(通过webpack),但是你想通过 cdn 的方式直接在浏览器中引入,估计就会出问题了

// sum.js
exports.sum = (x, y) => x + y

// index.js
const { sum } = require('./sum.js')

由于 cjs 为动态加载,可直接 require 一个变量

require(`./${a}`)

# esm (es module)

esm 是 tc39 对于 js 模块的规范,在 Node 及 浏览器中均会支持,使用 export/import 进行模块导入导出

// sum.js
export const sum = (x, y) => x + y

// index.js
import { sum } from './sum'

由于 esm 为静态导入,tc39 为动态加载模块定义了 API: import(module)

esm 是未来的趋势,目前一些 CDN 厂商,前端构建工具均致力于 cjs 模块向 esm 的转化,比如 skypacksnowpackvite

# umd

一种兼容 cjsamd 的模块,既可以在 node/webpack 环境中被 require,也可以在浏览器中直接用 CDN 被 script.src 引入

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // 全局变量
    root.returnExports = factory(root.jQuery);
  }
}(this, function ($) {
  // ...
}));

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 3/9/2021, 3:17:14 PM