前端工程化

模块化相关规范

模块化概述

传统开发模式的主要问题
 1》命名冲突
2》文件依赖

通过模块化解决上述问题

模块化 就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

大一统模块化规范 - ES6模块化规范

ES6模块化规范中定义： 每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块化成员使用 export关键字

1. Node.js 中通过Babel 体验ES6 模块化

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

npm install --save @babel/polyfil

项目根目录创建文件 babel.config.js babel.config.js 文件代码如下代码:

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

ES6模块化的基本语法

1. 默认导出与默认导入 默认导出语法 export default 默认导出的成员 默认导入 语法 import 接收名称 from ‘模块标识符’
2. 按需导入与导出 按需导出语法 export let s1 = 10

// 当前文件模块为 m1.js
    // 向外按需导出变量 s1 
    export let s1 = aaa
    // 向外按需导出变量s2
    export let s2 = ccc
    // 向外按需导出方法 say
    export function say = function ()  {
          
    }

按需导入 语法 import  { s1 }  from 模块标识符

//  导入模块成员
    import {
          
    s1,s2 as ss2,say }  from ./m1. js
    console. log(s1)  // 打印输出aaa
    console. log (ss2)  // 打印输出ccc
    console. log (say)  // 打印输出 [ runction : say]

3. 直接导入并执行模块代码