歡迎訪問我的個人部落格：http://www.xiaolongwu.cn

前言

雖然我們很多人每天都在寫專案，require或者import寫的爽得很，但還是有很大一部分人不清楚它背後的執行原理和所謂的規則機制。

開始

我們基於webpack開發，就拿基本的vue專案來舉例子吧

假如我們專案中要用到vue或者express框架，我們的程式碼就這樣寫

import Vue from 'vue'

//或者
var Vue = require('vue')

然後我們就能在下面輕鬆的用Vue這個變數，感覺很愉悅，但是你想過我們是怎麼拿到Vue這個東西的嗎？我們寫的import或者require這行程式碼道理幹了啥？

首先，import是es2015的模組引入規範，而require是commonjs的模組引入規範；

webpack支援es2015，commonjs，AMD等規範；

工作機制

前提是你在做web開發，試圖用webpack或者rollup打包你的專案；

首先會從本地的node_modules資料夾中找到vue資料夾，看是否存在package.json檔案；

如果找到了package.json，就會先找module欄位，然後讀取對應的路徑下的檔案，查詢到此結束；

如果沒找到module欄位，就會找main欄位，然後讀取對應的路徑下的檔案，查詢到此結束；

如果沒有main欄位，就會在vue資料夾下找index.js檔案，然後讀取檔案，查詢到此結束；

如果以上都沒找到就會返回異常，扔出not find異常

如果不存在package.json就會找index.js檔案，然後讀取檔案，查詢到此結束；如果還沒有就會丟擲異常；

簡單說一下module欄位

說到module欄位就不得不說一個和webpack很像的模組打包工具---rollup，

rollup是一個輕量級的打包工具，一般被用來打包模組或者庫，可以根據需要將模組打包為es，commonjs，AMD，CMD，UMD，IIFE等規範的模組；

而webpack一般被用來打包應用程式；

rollup提出了module這個欄位，其原因是一般主流的模組或者庫都是commonjs規範的模組，而es2015的模組規範才是js的未來，才應該是主流；

所以，一般的package.json中的module對應的模組為es模組，而main對應的為commonjs模組，webpack和rollup都會預設優先讀取module欄位；

github資源地址：webpack--require和import機制.md

我的CSDN部落格地址：https://blog.csdn.net/wxl1555

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[email protected]