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