es6-模块化

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

好处

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

规范产品
es6之前的模块化规范有：

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

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

1、export命令用于规定模块的对外接口---暴露
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标签内引入，还可以在js文件内引入

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

暴露方式
1、分别暴露，直接在属性或方法前加export关键字
2、统一暴露，例如

export{name,change};

3、默认暴露

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

引入方式
1、通用方式：

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

2、解构赋值形式

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

注意：名字重复或default 都可以使用as修改变量或函数名
3、简便形式，只能用于默认暴露

import m2 from "./m2.js";

babel对模块化代码转换
1、安装工具

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

2、转换

npx babel es6 -d lib

es6是要转换的文件夹，lib是目标文件夹

3、打包

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

模块化进入NPM包
1、安装

yarn add jquery

2、es6的js写入

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

注意
1、引入时不能使用模版字符串
2、jquery本地化无法直接使用，需要

3、使用bable将es6里的模块代码转换到lib文件夹

npx babel es6 -d lib

4、使用browserify进行打包

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

5、最后html文件内引入

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