模块化相关规范
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兼容问题,性能优化
有时间再看吧