AMD CMD CJM ESM模块转换
- 这些兼容是写法上的兼容，即在不改变以前依赖requieJs或者seaJs下模块的抒写方式，
- 利用webpack之后即可去掉这些依赖却不用修改写法，也支持混用
- 转换都是JS的模块化函数写法
module、exprots（webpack_exports）、webpack_require来自runtime的webpackBootstrap
以下转换只考虑target: web的情况（webpack版本 4.4.1）
import和require的加载转换
import和require都转换为__webpack__require
混用加载模块是可行的 Input
import CMDModule from './module/CMDModule';
import ESMModule from './module/ESMModule';
const AMDModule = require('./module/AMDModule');
const CJMModule = require('./module/CJMModule');
console.log('page4.js run');
Output
/***/ "./src/page4.js":
/*!**********************!*\
!*** ./src/page4.js ***!
\**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
//这里定义{esModule: true}
__webpack_require__.r(__webpack_exports__);
//用import语法载入非esm模块会补充default属性，去兼容import方法得到的对象
/* harmony import */ var _module_CMDModule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./module/CMDModule */ "./src/module/CMDModule.js");
/* harmony import */ var _module_CMDModule__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_module_CMDModule__WEBPACK_IMPORTED_MODULE_0__);
//普通的esm直接require
/* harmony import */ var _module_ESMModule__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./module/ESMModule */ "./src/module/ESMModule.js");
//require非esm模块
const AMDModule = __webpack_require__(/*! ./module/AMDModule */ "./src/module/AMDModule.js");
const CJMModule = __webpack_require__(/*! ./module/CJMModule */ "./src/module/CJMModule.js");
console.log('page4.js run');
ESM
目前最常用的es模块转化（webpack2.x以上才支持）
/***/ "./src/module/ESMModule.js":
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
//会对exports加入{__esMoudle: true}
__webpack_require__.r(__webpack_exports__);
//直接webpack__require去引用即可
/* harmony import */ var components_bar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! components/bar.js */ "./src/component/bar.js");
//export defaulth会放入到webpack_exports的default中，这里区别于别的转换是exports,所以esm混合转换会导致exports是undefined的
/* harmony default export */ __webpack_exports__["default"] = (a = 2);
/***/ }),
AMD
Input
define(['react'],function (React) {
console.log('AMDModule.js');
})
Output
/***/ "./src/module/AMDModule.js":
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;
//通过__webpack__require去加载define中的模块，保存到array中
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! react */ "./node_modules/react/index.js")],
//以exports作为执行对象，调用回调函数，将依赖模块作为数组传入
__WEBPACK_AMD_DEFINE_RESULT__ = (function (React) {
console.log('123');
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
//将结果赋值给module.exports
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ })
CMD
Input
define(function (require,exports ,module) {
console.log('CMD');
const defaultFunction = ()=>{
console.log('run default');
}
exports.data = defaultFunction;
})
Output
/***/ "./src/module/CMDModule.js":
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __WEBPACK_AMD_DEFINE_RESULT__;
//对比AMD这里就没有define array了，而是将require和exports和module传入进去传入进去
!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports, module) {
console.log('CMD');
var defaultFunction = function defaultFunction() {
console.log('run default');
};
exports.data = defaultFunction;
}).call(exports, __webpack_require__, exports, module),
//将结果赋值给module.exports
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }),
CommonJS
常见常见babel会转为CJM，然后webpack再转换（webpack2.x之前无法识别import的esm就会这么做）
Input
exports.data = ()=>{
console.log('CJMModule');
};
Output
/***/ "./src/module/CJMModule.js":
/*! no static exports found */
//这里转化非常简单，直接将exports带入即可，import都会转为webpackrequire
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.data = function () {
console.log('CJMModule');
};
/***/ }),