前端工程化---模块化

378 阅读1分钟

模块化历史

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区别?

参考:

JavaScript模块化进化史

CommonJS服务端模块化教程(Node.js模块化教程)

CommonJS浏览器端模块化教程

ES6-Babel-Browserify模块化教程

ES6 Module语法

ES6 系列之模块加载方案

前端模块化详解(完整版)

require和import的区别

开发者需要了解的nodejs中require的机制

前端科普系列(3):CommonJS 不是前端却革命了前端

前端模块化:CommonJS,AMD,CMD,ES6

import、require、export、module.exports 混合使用详解

你真的懂模块化吗?教你CommonJS实现

node.js中exports与module.exports的区别分析

我的前端自学笔记 => 模块化开发与规范化标准

了解 JavaScript 模块系统的基础知识,并建立自己的库 🍜

js当中对代码拆分时require.ensure()和import()的使用介绍及对比

50 种 ES6 模块,面试被问麻了