共计 1156 个字符，预计需要花费 3 分钟才能阅读完成。
欢迎访问我的个人博客：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
