模块化历史
IIFE(自执行函数)>>AMD(RequireJS实现)>>CMD(SeaJS实现)>>CommonJS(NodeJs)>>UMD>>
ES6 Modules(模块化直接成为了Javascript语言规范中的一部分)
同步导入
import
import a from './a.js'
require
const a = require('./a.js')
异步导入
import
import('./a.js').then(res=>{}).catch(e=>{})
require
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
// 示例
require.ensure([], (r)=>r('./a.js'), null, 'a')
// vue中使用require.ensure
// 为什么要这么写?因为这个是vue异步组件的语法,可以看vue官网的异步组件
const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
require.ensure()接受三个参数:
第一个参数dependencies是一个数组,代表了当前require进来的模块的一些依赖。
第二个参数callback就是一个回调函数。其中需要注意的是,这个回调函数有一个参数require,通过这个require就可以在回调函数内动态引入其他模块。
值得注意的是,虽然这个require是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则webpack就无法在静态分析的时候处理它。
第三个参数errorCallback比较好理解,就是处理error的回调。
第四个参数chunkName则是指定打包的chunk名称。
面试题
CommonJs和ES6 Modules区别?
参考:
CommonJS服务端模块化教程(Node.js模块化教程)
import、require、export、module.exports 混合使用详解
node.js中exports与module.exports的区别分析
了解 JavaScript 模块系统的基础知识,并建立自己的库 🍜