相关视频链接：尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩_bilibili
目录
2.18. 模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
2.18.1. 模块化的好处
模块化的优势有以下几点：
1) 防止命名冲突
2) 代码复用
3) 高维护性
2.18.2. 模块化规范 产品
ES6 之前的模块化规范有：
1) CommonJS => NodeJS、Browserify
2) AMD => requireJS
3) CMD => seaJS
2.18.3. ES6 模块化语法
模块功能主要由两个命令构成：export 和 import。
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
1. 通用的导入方式
index.html
//引入 m1.js 模块内容
import * as m1 from "./src/js/m1.js";
//from后面的引号中为新建js文件的路径
//引入 m2.js 模块内容
import * as m2 from "./src/js/m2.js";
//引入 m3.js
import * as m3 from "./src/js/m3.js";
console.log(m3);分别暴露
//m1.js
export let school = '啦啦啦';
export function teach() {
console.log("ksjhbfajdbvfj");
}统一暴露
//m2.js
let school = '尚';
function findJob(){
console.log("lalalla");
}
export {school, findJob};默认暴露
//m3.js
export default {
school: 'KJHHJKV',
change: function(){
console.log("slkdjfn");
}
}2. 解构赋值形式
import {school, teach} from "./src/js/m1.js";
//console.log(school);
//console.log(teach);
//m1中的school与m2中的school重复，会报错，可用别名school as guigu
import {school as guigu, findJob} from "./src/js/m2.js";
//console.log(guigu,findJob);
//不可直接使用default，要用他的别名
import {default as m3} from "./src/js/m3.js";
//console.log(m3);
//import后面的为js文件中想要暴露的名称3. 简便形式 针对默认暴露
import m3 from "./src/js/m3.js";
console.log(m3);4.新建一个app.js文件
//入口文件
//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
console.log(m1);
console.log(m2);
console.log(m3);
在html文件需引入
<script src="./src/js/app.js" type="module"></script>5.bable对ES6模块化代码的转换
- 安装工具 npm i babel-cli ，babel-preset-env ，browserify(webpack) -D
首先进行初始化：在打开文件的终端中输入npm init --yes
按下回车键后输入：npm i babel-cli babel-preset-env browserify -D（局部安装）
（全局安装要加上webpack）
再按回车键
- 输入 npx babel src/js -d dist/js --presets=babel-preset-env编译 （局部安装）
如果是全局安装可去掉npx
在这里我把所有的js文件单独放入一个js文件夹中，src/js表示该文件夹的位置，
dist/js表示编译后js文件夹的位置
- 打包需输入 npx browserify dist/js/app.js -o dist/bundle.js
在app.js文件中可调用
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
m1.teach();
m2.findJob();
m3.default.change();
需在app.js文件的终端中输入npm i babel-cli babel-preset-env browserify -D
再输入npx browserify dist/js/app.js -o dist/bundle.js
然后才可正常运行
6.ES6模块化引入NPM包
在html文件中引入<script src="dist/bundle.js"></script>
在终端中输入npm i jquery，按回车键
在入口文件app.js文件中
//入口文件
//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');