webpack -- require和import機制

歡迎訪問個人我的博客：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

若是您對個人博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同窗習進步。

郵箱：wuxiaolong802@163.com