ES6 模块化

1、初识

现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复杂的依赖关系，后期的维护成本会越来越高。

JavaScript模块化正式为了解决这一需求而诞生。

目前浏览器不支持ES6模块化的语法，所以我们在node里进行测试。

通过babel解决这个问题

2、通过babel编译js代码

1. 创建一个文件夹以及目录结构

• src 文件夹： 里面放源代码就行

2. 在当前文件夹下执行npm init

可以通过cd 且目录，没事多点tab，可以自动补全路径，一路点回车就行。（项目的名字不能是中文）

3.安装babel的依赖

// 命令行执行的
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

4. 添加babel的配置

在项目根目录下创建babel.config.js的文件，在里面写

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

5. 执行编译命令

在项目根目录下执行

npx babel  src --out-dir lib

6. 想运行哪个js的脚本就用node执行这个脚本就行了

node .\lib\想运行的js脚本.js

3、模块化的特性

• 在模块内定义的变量都是模块作用域。 在别的模块是访问不到的
• 如果想让别的模块访问到模块内的数据，需要做模块的导入和导出

4、默认导入导出

export default {
  导出内容
}

import 随便起的名字 from  '模块js文件的地址'

注意：只能有一个默认导出

5、普通的导入导出

export const name ="123"
export const age =111

import {name,age as } from  '模块js文件的地址'

注意：1、名字必须一一对应；2、普通导出可以导出多次