目录

2.18. 模块化

2.18.1. 模块化的好处

2.18.2. 模块化规范 产品

2.18.3. ES6 模块化语法

1. 通用的导入方式

2. 解构赋值形式

3. 简便形式  针对默认暴露

4.新建一个app.js文件

5.bable对ES6模块化代码的转换

6.ES6模块化引入NPM包

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文件夹的位置

  • 打包需输入 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');