19.模块化

模块化介绍

模块化是指讲一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化好处

1. 防止命名冲突
2. 代码复用
3. 高维护性

模块化规范产品

ES6之前的模块化规范有：

1. CommonJS => NodeJS、Browserify
2. AMD => requireJS
3. CMD => seaJS

ES6模块化语法

模块功能主要由两个命令构成：export和import

• export命令用于规定模块的对外接口
• import命令用于输入其他模块提供的功能

//m1.js
export let school = 'Study';

export function teach(){
    console.log("day day up");
}

//引入m1.js模块内容
import * as m1 from "./src/js/m1.js";
console.log(m1);

ES6模块暴露数据语法汇总

//统一暴露  m2
let school = 'Study';

function findJob(){
    console.log("day day up");
}

export {school,findJob};

import * as m2 from "./src/js/m2.js";
console.log(m2);

//默认暴露  m3
export default {
    school:'Study';
    change:function(){
        console.log("day day up");
    }
}

import * as m3 from "./src/js/m3.js";
console.log(m3);
m3.defautl.change();//"day day up"

ES6引入模块数据语法汇总

//1.通用引入方式
import * as m1 from "./src/js/m1.js";


//2.解构赋值形式
import {school,teach} from "./src/js/m1.js";
import {school as height,findJob} from "./src/js/m2.js";
import {default as m3} from "./src/js/m3.js";

console.log(school,teach);//Study //"day day up"
console.log(height,findJob);
console.log(m3);

//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);

//index.html
<script src='./js/app.js' type="module" ></script>

babel对ES6模块化代码转化

//1.安装工具 babel-cli babel-preset-env browserify|webpack
npm install //初始化
npm i babel-cli babel-preset-env browserify -D
//2.npx babel src/js -d dist/js 设置转换目录，转换
npx babel src/js -d dist/js --presets-babel-preset-env
//3.打包 npx browserify dist/js/app,js -o dist/bundle.js
npx browserify dist/js/app,js -o dist/bundle.js

//index.html
<script src='dist/bundle.js'></script>

ES6模块化引入NPM包

//app.js
//修改背景颜色为粉色
import $ from 'jquery';// const $ = require('jquery');
$("body").css('background','pink');