工程化，模块化，模块化规范，ES Modules，CommonJs , 模块打包工具webpack

技术是为了解决问题而存在的，切忌畏惧技术，为了技术而技术。但凡能解决实际问题或者简化问题的技术，就是值得使用的好技术。

webpack面试题

什么是工程化：工程化不是一个工具，工程化是一个目标。

工程化主要解决的问题：

• 传统语言或语法的弊端
• 无法使用模块化/组件化方式去处理代码
• 重复的机械式工作
• 无法统一代码风格，无法保证代码质量
• 前端项目依赖后端服务接口支持
• 整体依赖后端项目

工程化的表现：
一切以提高效率，降低成本，质量保证为目的的手段都属于工程化。

工程化内容：

• 脚手架工具开发：项目创建阶段，前端工程化的表现。
• 自动化构建系统
• 模块化打包
• 项目代码规范化
• 自动化部署

脚手架：是一个自动创建项目基础文件，提供项目规范和约定的工具。只是工程化的一部分

• 创建一类项目时，项目会有相同的组织结构，相同的开发范式，相同的模块依赖，相同的工具配置，相同的基础代码等。每次创建项目都有这些相同内容，所以会存在大量重复工作。而通过脚手架工具可以解决这个问题。
  常用的脚手架工具：创建项目的基础结构

• vue => vue-cli：
• react => creat-react-app
• angular => angular-cli

自动化构建：一切重复的工作都应该自动化

• 常用的自动化构建工具：
  • grunt: 不推荐使用。有非常完善的插件系统，几乎可以实现任何功能。基于临时文件实现，构建速度比较慢。
  • gulp：推荐使用。基于内存实现，构建速度相对更快。插件生态也很完善。基于流的自动化构建工具。读取，转换，写入。
  • FIS：百度前端团队推出的自动化构建系统。捆绑套餐。初学者适合。
    grunt和gulp是早期的自动化构建工具，grunt是基于临时文件，构建速度慢。gulp是基于流，构建速度相对较快。轻量小型的项目还是会使用gulp。通过读取，转换，写入的方式，对代码进行转换，组合，压缩等。形成自动化的任务。而webpack是专注于处理模块化项目的模块打包器。

什么是模块化开发。模块化开发的演变过程。

• 根据功能的不同把代码划分成模块进行单独维护。通过导出导入将多个模块之间进行关联。
• 我们只在开发阶段需要模块化。对代码进行拆分，但是运行阶段需要对代码进行打包整合。

ES Modules 【浏览器的模块化规范】 浏览器和服务器通用。

1. 模块化规范：

   1. 模块化规范有哪些：
      1. AMD[异步加载模块-AMD推崇依赖前置<在定义模块时要先声明其依赖的模块，AMD加载完模块后，就立马执行该模块>，RequireJs是AMD规范的实现–RequireJS在主文件里是将所有的文件同时加载–RequireJS是外国人开发出来的] ,
      2. CMD[异步加载模块-CMD推崇依赖就近<只有在用到某个模块的时候再去require，CMD加载完某个模块后没有立即执行而是等到遇到require语句的时再执行>,SeaJS是CMD规范的实现–SeaJS强调一个文件一个模块–SeaJS是国人开发出来的] AMD,CMD最大的区别是对依赖模块的执行时机处理不同
      3. CommonJs：Node[服务端]的模块化规范。每个模块通过module.exports导出成员，通过require载入模块。require函数会自动创建一个script标签去发送对应的脚本文件的请求并执行相应代码。[同步模块化，在一开始就去加载所有模块信息]
      4. ES Modules：浏览器的模块化规范。ESM的script会延迟执行脚本 优先渲染页面。ESM通过CORS跨域资源共享方式请求外部JS
   2. 模块化规范的特点：
   • 一个文件就是一个模块。
   • 每个模块有自己的私有作用域。
   • 自动采用严格模式。this --undefined
   3. 模块化的优点就是：
   • 代码复用性
   • 代码拆分。模块之间依赖性小，可以单独维护。

2. ES Modules:

3. ESM核心功能：

4. 导出 export 在模块内对外暴露接口 。导出的成员并不是拷贝数据，而是导出指针引用

    export const a = "lg";         import {
        a} from ''
    export {
         foo , bar };          import {
        foo,bar} from ''
    export {
         name as fooname };    import {
        fooname} from ''
    export default a;              import xx/aa/bb/a from '' //导出一个默认成员,可以直接对它进行重命名导入
   

5. 导入 import 在模块内导入其他模块提供的接口。导入的成员是只读成员

   1. import导入路径不能省略.js
   2. 导入时使用相对路径不能省略./
   3. import * as data from ‘’ 通过data.可以拿到所有成员。
   4. ESM提供了一个import函数用于去动态导入模块【当模块路径未知时】，返回的是一个promise对象 import(url).then( module => {})
   5. 将导入模块整合后直接导出

         //import {a} from ''
         //import {b} from ''
         //export {a,b}
         export {
        a} from ''
         export {
        b} from ''
   

6. ESM in Brower：

   1. Polyfill 解决运行环境兼容性问题–是一个ES Module Loader
   2. 可以在script标签上添加nomodule属性。这样，loader就只会在不支持某些ESM的浏览器中工作。
   3. script方式不推荐在生产环境使用，因为是在运行阶段动态解析脚本，效率低。

7. ESM和CommonJS的区别：

   1. ESM可以导入CommonJS. CommonJS中不可以导入ESM

   2. CommonJS只会导出一个默认成员

   3. 在CommonJS中，不能使用require导入ESM

      1. require加载模块是一个同步过程
      2. require函数可以在代码的任意位置执行

          module.exports = {
             
              a:'111',
              //b:[],
              //c:{}
          }
          //exports.a =