《ES6模块化》

以下内容纯属个人扯淡，仅供参考

目录

一、概述

二、基本语法

---

 

一、概述

1、传统开发模式的问题

命名冲突：多个js文件之间，不能存在同名的变量
文件依赖：js文件之间无法实现相互引用

2、模块化

1。概述

将单独的一个功能封装到一个模块文件中，模块之间相互隔离，但可通过特定的接口公开内部
成员，也可以依赖别的模块
好处：方便代码重用，方便维护，提升效率

2。相关规范

1）浏览器端

AMD：Require.js
CMD：Sea,js

已落伍

2）服务器端

CommonJS
    模块分为单文件模块和包
    模块成员导出：module.exports和exports
    模块成员导入：require('模块标识符')

3）ES6

浏览器端与服务器端通用的模块化规范

每个js文件都是一个独立的模块
导入模块成员：import
暴露模块成员：export

Node中默认支持CommonJS模块化，对于ES6模块化规范，还要搭配babel插件（babel是一个语法转换工具，可以将高级的js代码转换为低级的没有兼容性问题的js代码）来支持高级ES6

二、基本语法

概览

Demo
默认导入导出
按需导入导出
直接导入模块并执行

1、Demo

（1）安装Node、WebStorm（Hbuilder也行）

配置好npm镜像、WS绑定node、node本地仓库路径（不建议）、node环境变量等。参考：

Nodejs安装及环境配置

Webstorm下配置node环境

idea或webstorm配置npm问题

'cnpm' 不是内部或外部命令,真正有效解决方法

（2）安装babel

在项目文件夹（空）下运行，它将在该空文件夹下生成package-lock.json文件、node_modules文件夹

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

（3）安装polyfill

项目根路径下执行：

npm install --save @babel/polyfill

扩展知识：执行完上述两步后，该项目所需要的依赖就已完成，如果需要克隆一个出来，则只需要拷贝package-lock.json文件到空文件夹下执行：npm install就能下载到所有依赖

（4）babel配置文件

项目根路径下创建babel.config.js，内容如下

//语法转换插件数组，用到了env插件
const presets = [
    ["@babel/env",{
        //转换完毕的代码起码要支持
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1"
        }
    }]
];

//向外暴露以供babel使用
module.exports = { presets };

（5）index.js

项目根路径下创建index.js，如下：

console.log('OK');

（6）运行

npx babel-node index.js

结果：控制台将打印OK

2、默认导入导出

（1）创建m1.js，如下：

let a = 10
let c = 20
let d = 30

function show() {
  console.log('1111111111111')
}
//默认导出：a、c属性，show方法
export default {
  a,
  c,
  show
}

（2）index.js默认导入

//默认导出的这个m1名可以随便写，但最好取名要有意义
//from接的是js文件相对路径
import m1 from './m1.js'  

console.log(m1); //打印m1

注意：每个js模块中，可以有但只有一个export default，否则将运行报错

3、按需导入导出

（1）创建m2.js，如下：

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {
  console.log('ooooooooo')
}

（2）index.js按需导入

//m1是默认导入成员，它里面包含了a、c、show
//后面是按需导入的
import m1, { s1, s2 as ss2, say } from './m1.js'

console.log(m1);
console.log(s1);
console.log(ss2);
console.log(say);

4、直接导入模块并执行

（1）创建m3.js

for (let i = 0; i < 3; i++) {
  console.log(i)
}

//该模块并未向外暴露任何成员

（2）index.js导入并执行

import './m2.js'  //只执行m2中的js代码，但不接受它的成员