【ES6模块化】

在学习之前呢，我们想一个问题，为啥我们在项目中可以使用import xxx from ‘xxx’，你真的知道吗？

前端模块化规范

模块化规范就是用来方便不同模块之间导出导入数据的规范（大家都遵守的法则），有很多种类
例如：AMD、CMD或者CommonJS等模块化规范
其中，Node.js中的require和module.exports就是遵守的是CommonJS规范
那这么多规范，我们如何抉择呢？
ES6模块化规范就是一个大一统的版本，我们所有的导入和导出都遵守这个规范就可以了

ES6模块化规范

有哪些规定呢？

• 每个js文件都是一个独立的模块
• 导入其他模块成员使用import关键字
• 向外共享模块成员使用export关键字

基本语法

默认导出与默认导入

• 默认导出
  默认导出的语法：export default 默认导出的成员

// 当前文件夹下的a.js
let n1 = 10 // 定义模块私有成员n1
function show(){} // 定义模块私有方法show
export default {
n1,show
}

React项目中，经常看到 export default App,其实呢，App就是一个对象
每个模块中，只能有一个export default，否则就会报错

• 默认导入
  默认导入语法：import 接收名称 from ‘模块标识符’

import a from './a.js'
console.log(a) // {n1:10,show:[Function:show]}

接收的名称是任意的合法成员名称就可

按需导出与按需导入

• 按需导出
  按需导出语法：export 按需导出的成员

// 当前文件夹下的b.js
export let s1  = 'aaa'
export let s2 = 'bbb'
export function say(){}

• 按需导入
  按需导入的语法：import { s1 } from ‘模块标识符’

import {s1,s2,say} from './b.js'
console.log(s1,s2,say)

1. 按需导入的成员名称必须和按需导出的名称保持一致
2. 按需导入，可以使用as关键字进行重命名
3. export 和 default export 可以一起使用

直接导入并执行模块中的代码

如果知识单纯想执行某个模块中的代码，并不需要的到模块中成员，可以使用直接导入

// 当前文件夹下的b.js
for(let i = 0;i<10;i++){
	console.log('做好当下，不问前程；与君共勉')
}

// 当前文件件下的index.js
import './b.js'

如何让node.js也遵守ES6模块化规范

node.js默认遵守的CommonJS模块化规范，要想使用ES6规范，需要进行2点配置

• 1. 确保安装了v14.15.1或更高版本的node.js
• 2. 在package.json的根节点中添加"type":module节点.

import React,{Component} from 'react’的理解

// 当前文件夹的a.js
export default const React = {a:1.b:2}
export const Component = {}

import React,{Component} from 'a.js'
console.log(React,Component)

这是按需导入和默认导入的共存的情况，不能理解成{Component}是React的结构赋值的情况