前端模块化

模块化相关规范

ES6模块化规范

• 每一个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

babel

• 通过JS高版本的代码兼容低版本的代码

• npm install --save-dev @babel/core @babel/cli @babel/present-env @babel/node

• npm install --save @babel/polyfill

• 项目根目录创建文件babel.config.js

• babel.config.js 文件

  const presets = { 
    ["@babel/env",{
        targets:{
            edge:'17',
            firefox:'60',
            chrome:'67',
            safari:'11.1'
        }
    }
    
    ]
  }
  module.exports = { presets}
  

• 通过npx babel-node index.js 执行代码

模块化基本语法

默认导出，默认导入

• 默认导出 export default 默认导出成员
• 默认导入 import 接收名称 from '模块标识符'

export default 只允许使用一次在类中

按需导入，按需导出

• 按需导出语法 export let s = 10
• 按需导入 import { s } from '模块标识符'

直接执行

• import './m.js' // 直接导入并执行

webpack前端构建工具（打包工具）

提供模块支持，代码混淆，js兼容问题，性能优化

有时间再看吧