概念
模塊化是指將一個(gè)大的程序文件，拆分成許多小的文件，然后將小文件組合起來。

好處

1、防止命名沖突
2、代碼復(fù)用
3、高維護(hù)性

規(guī)范產(chǎn)品
es6之前的模塊化規(guī)范有：

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

語法
模塊功能主要由兩個(gè)命令構(gòu)成：export和import。

1、export命令用于規(guī)定模塊的對(duì)外接口---暴露
2、import命令用于輸入其他模塊提供的功能---引入

//js
export let name = `名字`;
export function change() {
    console.log(`修改名字`);
}
//引入
<script type="module">
     import * as m1 from "./m1.js";
     console.log(m1);
</script>

除了直接在script標(biāo)簽內(nèi)引入，還可以在js文件內(nèi)引入

注意：html和js文件不要用module命名，以及module1等也不可以

暴露方式
1、分別暴露，直接在屬性或方法前加export關(guān)鍵字
2、統(tǒng)一暴露，例如

export{name,change};

3、默認(rèn)暴露

export default {
    price: `30w`,
    changePrice: function () {
        console.log(`修改價(jià)格`);
    }
}

引入方式
1、通用方式：

import * as m1 from "./m1.js";

2、解構(gòu)賦值形式

import {name,change} from "./m1.js";
import {default as m2} from "./m2.js";

注意：名字重復(fù)或default 都可以使用as修改變量或函數(shù)名
3、簡便形式，只能用于默認(rèn)暴露

import m2 from "./m2.js";

babel對(duì)模塊化代碼轉(zhuǎn)換
1、安裝工具

npm i babel-cli babel-preset-env browserify -D
yarn add @babel/cli  @babel/preset-env --dev
yarn add browserify

2、轉(zhuǎn)換

npx babel es6 -d lib

es6是要轉(zhuǎn)換的文件夾，lib是目標(biāo)文件夾

3、打包

npx browserify lib/fs.js -o dist/bundle.js

模塊化進(jìn)入NPM包
1、安裝

yarn add jquery

2、es6的js寫入

import $ from 'jquery';
$('body').css('background','pink');

注意
1、引入時(shí)不能使用模版字符串
2、jquery本地化無法直接使用，需要

3、使用bable將es6里的模塊代碼轉(zhuǎn)換到lib文件夾

npx babel es6 -d lib

4、使用browserify進(jìn)行打包

npx browserify lib/app.js -o dist/bundle.js

5、最后html文件內(nèi)引入

<script src="/dist/bundle.js"></script>