ES6的模块化使用,模块导出Export,导入import

ES6的模块化概念

在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。

1.1什么是模块化

模块化是指把一个复杂的系统分解到一个一个的模块，再用一定的方式拼装起来。

1.2模块化开发的优点

(1)一个单独的文件就是一个模块，是一个单独的作用域，只向外暴露特定的变量和函数。这样可以避免污染全局变量，减少变量命名冲突。

(2)代码复用，让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。

默认情况下，script标签中不能使用import语句，
如果想让其支持模块化，必须设置script的type属性为module

<script type="module">
        import a, {b, c, obj, fn} from './m1.js';
        console.log(a, b, c, obj);
        fn();
    </script>

安装nodejs

下载官网:nodejs

1. 安装nodejs （简单操作就是 一路next (除了更改文件安装目录)）
   2. 测试 nodejs 安装是否成功
   2-1. 打开命令行窗口（cmd）
   (1) 在开始菜单 的搜索栏输入 cmd 直接回车
   (2) 在电脑的任何空白地方 ， 按着 shift键 + 鼠标右键 出现菜单 在此处打开命令行窗口
   2-2 在命令行窗口中输入命令测试
   输入 node -v 回车
   出现详细的nodejs版本号， 就证明nodejs 安装成功了

   如果输入命令回车出现 一下的提示信息： 就证明要么没有安装相关的命令工具，或者是安装失败
   ‘xxx’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

2. npm 包管理命令
   npm 随着nodejs的安装一起安装
   测试 npm 是否可以使用
   输入 npm -v 回车即可

   4. es6的模块： 借助一个webapck的打包工具使用

   5. webpack的相关命令： 这两个都是打包
      npm run build

      npm run dev

安装好后还要安装依赖

安装依赖：
在项目的根目录下（package.json 文件所在的目录） 执行 npm i 命令
在项目 目录下 执行 npm init -y命令 就能生出package.josn文件

在项目 目录下 执行 npm install webpack -cli - - save命令 就能生出package-lock.josn文件

下面的这个环境就是配好了

然后我们去使用

首先

然后导入(导入的地址可以不写js后缀,)

然后打包 命令是 npm run build

这个时候就自动出现了一个文件夹,它是一个js文件,可以使用

输出到控制台看一下
是可以用那个js文件输出的

只要打包后命令行有下面 successfully(翻译:成功的)就是打包成功

模块导出export

导出普通模块

可以把任意的数据类型作为模块导出

1. 单独导出模块：

// a.js
export const num = 100;  // 导出模块
export let str = 'heelo' // 变量名或者函数名就是模块名
export function fun(){} 

2. 整体导出模块

// a.js
const num = 100;
let str = 'hello world';
function test(){}

export {
    num, // 导出的模块名
    str,
    test
}

3. 导出模块起别名
一旦导出模块时起了别名，导入模块时必须使用对应的别名

export {
    num as n,
    str as s,
    test as t
}

导出默认模块

一个模块文件只能有一个默认模块，可以有多个普通模块

export default 模块名

模块的导入 import

如果是导入普通模块，需要通过对象的解构的形式导入

// 引入普通模块  模块名必须和导出的模块名保持一致 
//  多个模块之间使用逗号隔开
import {模块名1, 模块名2, ...} from '文件路径url'
// 案例
import {num, str, test} from './a.js'

// 引入默认模块  默认模块的名字可以自定义
import 自定义模块名 from '文件路径url'

// 导入模块起别名 , 
import {模块名 as 自定义名字} from '文件路径'

//  默认模块和普通模块同时引入
import 默认模块名,{普通模块名, ...} from '文件路径'

/  模块整体加载 必须给模块起别名
/  使用的是普通的模块，通过 `别名.模块名` 使用； 如果使用默认模块， 通过 `别名.default`  使用
import * as 别名 from '文件路径'

模块之间的关系

一个模块可以被多个模块引用； 一个模块可以引入多个模块