js-6 模块，webpack安装和打包编译

模块

1.模块管理引擎

AMD CMD UMD

开发一个模块管理引擎
有定义模块的module中的define，定义的模块的方法可以被其他模块使用。hd的两个方法被lesson使用，hd的return是导出，lesson的生成方法的第二个参数是导入，第三个回调函数参数hd是hd的方法对象。

    let module = (function () {
        const moduleList = {};          //模块容器，是个对象，key是模块名字，value是模块导出的方法。按名取用。

        function define(name, modules, action) {      //名字，依赖的参数，动作


            modules.map((m, i) => {                     //m是依赖的模块的名字，i是模块的下标
                // console.log(2);
                // console.log(moduleList[m]);
                modules[i] = moduleList[m];
                // console.log(3);
                // console.log(modules[i]);               //此时的modules[i]存储的是依赖模块的方法

            })
            moduleList[name] = action.apply(null, modules);    //modules是存储的是依赖模块的方法，作为参数传递给42行module.define('lesson', ["hd"], function (hd) 的 hd
            //把模块导出的方法放到模块容器中
            // console.log(1);
            // console.log(moduleList);
        }
        console.log({define});
        return {define};
    })();
    module.define('hd', [], function () {           //声明模块
        return {
            first(arr) {
                return arr[0];
            },
            max(arr, key) {
                return arr.sort((a, b) => b[key] - a[key])[0];
            }
        }
    });
    module.define('lesson', ["hd"], function (hd) {           //声明模块,导入hd的方法。即hd。hd：hd模块所导出的方法。moduleList[name] = action.apply(null, modules);中modules所传递。
        let data = [
            {
                name: 'js', price: 199
            },
            {
                name: 'mysql', price: 79
            }
        ]
        console.log(hd.max(data, "price")
        )
    });
</script>

2模块基本使用：js模块的内容经导出在其他文件中使用，而不是全部引入。

js文件的导出export：

let title = 'lxj';
let url = 'biliibli';
function show() {
    console.log("ixzngjia");
}
export {title, show};

html文件的导入import、script标签的类型声明type=“module”、路径完整./不可省略：

<script type="module">
        import {title, show} from "./hd.js";
        console.log(title);
        show();
    </script>

3模块延迟解析，严格模式

1.因为模块，多个模块之间可能存在依赖，所以执行时间晚一些，放在body前的模块中的执行语句要比body晚执行。
2.模块中的语句默认就是在严格模式下，注意语法规范

4作用域

就像是两个函数中的局部变量一样：
模块里的 属性的作用域只在自己的模块中，不可在模块外访问，作用域独立。要想使用只能导出后使用。
模块可访问全局变量

5模块预解析

模块只解析一次

6导出

模块中要导出的数据要有名字，没有名字不能导出。

7.批量导入用 *，全部导入，但使用时要用 名字.

import * as api from “./hd.js”;
api.title
但是这样写的话打包工具会将不使用数据的也全部打包，影响效率，体积，清晰

8导入,导出模块别名使用

import {title as t } from “./hd.js”;
export {title as t, show};
可以多个元素都起别名

9默认导出export default，就一个需要导出，接受变量可任意名字（最好和js文件的文件名相同）且不用花括号

具名导出和默认导出可以写在一起，混合使用
export default class s {
show() {
console.log(“ixzngjia”);
}
}

10模块的合并导出

1.1.1.js,1.1.2.js.1.1.js
文件导入1.1.1 1.1.2时，可以先把1.1.1 1.1.2在1.1中合并，再导入文件，这样可以避免模块变量重名带来的错误，更能方便实用和管理
1.1.js:
import * as m11 from “./1.1.1.js”
import * as m12 from “./1.1.2.js”

export {m11,m12}

hd.html:
import * as api from “./1.1.js”
;api.m11.url

11按需动态加载导入 import（）.then()

let xj = "lxj";
let site = "www.baidu.com";
function action() {

}

export {xj, site, action};

<script type="module">
        document.querySelector("button").addEventListener("click",function () {
            import("./1.2.js").then( ({site, xj}) => console.log(site, xj)
            )
        })

    </script>

12webpack构建项目的软件安装

1在官网下载node.js。

2在webstorm（重启）的终端上输入npm -v 测试是否安装成功，成功则出现版本号

3安装webpack工具使用此命令 npm install --save-dev webpack

如果安装不顺利卡在

则点击这里查看
生成了一个叫node_module的文件夹

13用webpack完成项目的打包编译，即可顺利在普遍的低版本浏览器运行代码。

4使用命令npm init -y 当前15文件夹下出现一个package.json文件，修改这个文件的内容，增加dev这一行，

“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev” : “webpack --mode development --watch”
},

5在15文件夹下新建文件夹dist、src。

6在src下写两个js文件

7.执行命令npm run dev

在dist下自动生成了main.js文件

8index.html引入这个main文件: