ES6模块化相关规范笔记

一.为何使用ES6模块化
1.传统开发模式的主要问题
① 命名冲突：多个js之间如果存在重名变量会有覆盖问题
② 文件依赖：js文件之间无法实现相互的引用
2.通过模块化解决上述问题
①模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
②模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

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

三.通过导入node.js的babel库来体验ES6模块化

1. npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
   –save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
   –save-dev ： devDependencies 键下，开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它，而只是在我们开发才用到它。
   (1) babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相 应的处 理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数 默认值等，这 种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。
   (2)babel-cli有两个主要的命令需要用到：
   babel：按照“.babelrc“文件转码js文件。
   babel-node：提供一个支持ES6的REPL环境，支持Node的REPL环境的所有功能，可以直接运行ES6代码。
   (3) babel-preset-env可以设置一些选项，这里就介绍几种，有兴趣自己去看英文文档
   targets 指定运行环境
   targets.node 指定node版本
   targets.browsers 指定浏览器版本
   modules 指定何种形式的模块，设置为false表示不转码模块

2. npm install --save @babel/polyfill
   解决Babel 默认不转码的 API

3. 项目根目录创建文件 babel.config.js

4. 配置babel.config.js 文件

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

5. 通过 npx babel-node index.js 执行代码

默认导出语法 export default 默认导出的成员
默认导入语法 import 接收名称 from ‘模块标识符’

按需导出语法 export let dog = “小环”
按需导入语法 import { dog, show } from ‘./p1.js’

//p1.js
let a = 1;
let b = "2";
let c = true;

function fn() {
    console.log("abc");
}

//将私有成员暴露出去 每个模块中，只允许使用唯一的一次
export default {
    a,
    b,
    c,
    fn
}

//按需导出
export let dog = "小环";
export function show() {
    console.log("世界如此美妙");
}

import d, { dog, show } from "./p1.js";
console.log(d, dog);
show()

运行结果为
{ a: 1, b: '2', c: true, fn: [Function: fn] } 小环
世界如此美妙