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

Failed to load 'F:\吴亮\TypeScript\build\webpack.config.js' config [webpack-cli] Error: Cannot find module 'clean-webpack-plugin' Require stack: - F:\吴亮\TypeScript\build\webpack.pro.config.js - F:\吴亮\TypeScript\build\webpack.config.js - F:\吴亮\TypeScript\node_modules\webpack-cli\lib\webpack-cli.js - F:\吴亮\TypeScript\node_modules\webpack-cli\lib\bootstrap.js - F:\吴亮\TypeScript\node_modules\webpack-cli\bin\cli.js - C:\Program Files\nodejs\node_global\node_modules\webpack-cli\node_modules\import-local\index.js - C:\Program Files\nodejs\node_global\node_modules\webpack-cli\bin\cli.js - C:\Program Files\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:93:18) at Object.<anonymous> (F:\吴亮\TypeScript\build\webpack.pro.config.js:1:32) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND', requireStack: [ 'F:\\吴亮\\TypeScript\\build\\webpack.pro.config.js', 'F:\\吴亮\\TypeScript\\build\\webpack.config.js', 'F:\\吴亮\\TypeScript\\node_modules\\webpack-cli\\lib\\webpack-cli.js', 'F:\\吴亮\\TypeScript\\node_modules\\webpack-cli\\lib\\bootstrap.js', 'F:\\吴亮\\TypeScript\\node_modules\\webpack-cli\\bin\\cli.js', 'C:\\Program Files\\nodejs\\node_global\\node_modules\\webpack-cli\\node_modules\\import-local\\index.js', 'C:\\Program Files\\nodejs\\node_global\\node_modules\\webpack-cli\\bin\\cli.js', 'C:\\Program Files\\nodejs\\node_global\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js' ] }
07-20
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值