前端模块化开发—webpack详细介绍

一、模块化开发

common.js规范

1. 一个文件就是一个模块
2. 每个模块都有单独的作用域
3. 通过module.exports导出成员
4. 通过require函数载入模块

commonJS是以同步模式加载模块

AMD(异步的模块定义规范)

Require.js

ES Modules

基本特性

1. 自动采用严格模式
2. 每个ESM模块都是单独的私有作用域
3. ESM是通过CORS去请求外部JS模块的
4. ESM的script标签会延迟执行脚本

导入和导出

 
import {} from './modules'

import * as mod from './modules.js'

import ('./modules.js').then(modules=>{
    console.log(modules)
})

import title, { name, age } from './modules.js'

直接导出导入成员

1、将多个模块统一在一个文件导出，在从统一入口进行引用
2、使用polifill解决浏览器不兼容ESmodules的问题(只适用于本地测试开发)