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文件: