详解webpack解惑:require的五种用法


Posted in Javascript onJune 09, 2017

webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.include,再加上ES6的import语法,这么多岂不是会把人给搞乱。本篇就来梳理一下这些require各自的特点,以及都在什么场景下使用。

commonjs同步语法

经典的commonjs同步语法如下:

var a = require('./a');
a.show();

此时webpack会将a.js打包进引用它的文件中。这是最普遍的情形,不必赘述。

 commonjs异步加载

在commonjs中有一个Modules/Async/A规范,里面定义了require.ensure语法。webpack实现了它,作用是可以在打包的时候进行代码分片,并异步加载分片后的代码。用法如下:

require.ensure([], function(require){

  var list = require('./list');

  list.show();

});

此时list.js会被打包成一个单独的chunk文件,大概长这样:

1.fb874860b35831bc96a8.js

可读性比较差。我在上一篇结尾也提到了,给它命名的方式,那就是给require.ensure传递第三个参数,如:

require.ensure([], function(require){

  var list = require('./list');

  list.show();

}, 'list');

这样就能得到你想要的文件名称:

list.fb874860b35831bc96a8.js

你也可以传入像"question/list"这样带层级的名字,这样webpack会按照层级给你创建文件夹。

需要注意的是,如果你在require.ensure的函数中引用了两个以上的模块,webpack会把它们打包在一起,比如:

require.ensure([], function(require){

  var list = require('./list');

  list.show();

  var edit = require('./edit');

  edit.display();

}, 'list_and_edit');

list.js和edit.js将会被打包成一个文件,并命名为list_and_edit.js。这就需要根据你的实际情况来衡量了,如果你不希望打包在一起,只能写两个require.ensure分别引用这两个文件。

多说一句,这种思维其实我是很不喜欢的,在编码阶段却要对打包的事情做出决策,明显违背了职责分离原则。

 commonjs预加载懒执行

在上面的用法中,我们给require.ensure的第一个参数传了空数组,实际上这里是可以接收模块名称的,作用就是实现预加载懒执行。用法如下:

require.ensure(['./list'], function(require){

  var list = require('./list');

  list.show();

});

给require.ensure的第一个参数传了['./list'],执行到这里的时候list.js会被浏览器下载下来,但是并不会执行list.js模块中的代码,也就是webpack官网说的,不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。

写在函数中的多个模块会被打包在一起,这一点和上面没有区别。另外,写在数组中的模块也会跟他们打包在一起,不管你有没有手动执行。

这种写法也是有点别扭的,像是commonjs和AMD的结合体,而且一个模块名称还要写两次,真是不够优雅。所以webpack自己定义了一个方法,能够实现预加载。

 webpack自带的require.include

require.include是webpack自己提供的,并没有什么规范做后台,所以是个小角色。它可以实现上面是预加载功能,而不用把模块写在数组中,用法如下:

require.ensure([], function(require){

  require.include('./list');//此处只加载不执行

});

据webpack官网文档介绍,require.include还有一个作用是能把子模块中的公共部分,提取到父模块中,比如child1和child2都引用了list.js这个模块,那么如果在parent中include了list.js,那么子模块中的就会被删掉,相当于提升到了父模块中。(这里所谓的父子关系是指引用关系)

这个方法官方也是一笔带过,看来也是一个鸡肋的东西,用处不大。因为我发现require.include的返回值是undefined,也就是说,如果你想使用模块,姿势是这样的:

require.ensure([], function(require){
  require.include('./preview'); //加载
  let p = require('./preview'); //执行
  p.getUrl(); //使用
}, 'pre');

AMD异步加载

webpack既支持commonjs规范也支持AMD规范,这就意味着AMD的经典语法是可以正常使用的,如:

require(['./list'], function(list){

  list.show();

});

当然,这样写的话list.js也是被单独打包成一个文件的。与上面类似,如果你在这里写了多个模块,那么这些模块都会被打包成一个文件,如:

require(['./list', './edit'], function(list, edit){

  list.show();

  edit.display();

});

list.js和edit.js会被打包在一起。不同的是,AMD的方式无法传入第三个参数当文件名,所以得不到很好看的文件。

ES6 import

这年头不用ES6都不好意思跟人打招呼。所以我们的代码中,又会多一种模块引入语法,那就是import。import会被转化为commonjs格式或者是AMD格式,所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的,你也不用费劲再把它转成AMD了。

所以如下写法是等价的:

import list from './list';

//等价于

var list = require('./list');

不过这两种写法只需选一种,避免在代码中同时使用两种,否则会造成混淆。

 总结

以上把require的用法捋了一遍,明白了各自用法的区别之后,我们就可以在项目中进行选择了。我觉得最佳选择是往commonjs方向靠拢,想尝试ES6的话就用import代替commonjs同步语法即可。

因此,代码中保持以下两种风格就好:

//可打包在一起的同步代码,使用import语法

import list from './list';

 

//需要独立打包、异步加载的代码,使用require.ensure

require.ensure([], function(require){

  var list = require('./list');

});

很显然,你在写代码的时候还是需要对打包结果进行决策,这是我不喜欢webpack的原因。gulp那样多好,编码就是编码,编译就是编译,分开来。不过这就是webpack以模块为核心的打包方式的特点吧,仁者见仁,只要团队内做一个约定,也不会打的一塌糊涂。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
Bootstrap输入框组件使用详解
Jun 09 #Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
微信分享调用jssdk实例
Jun 08 #Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 #Javascript
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
浅谈 Vue v-model指令的实现原理
Jun 08 #Javascript
Vue如何实现组件的源码解析
Jun 08 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Python NumPy库安装使用笔记
2015/05/18 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python更改已存在excel文件的方法
2018/05/03 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python 切分数组实例解析
2019/11/07 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
教师党员思想汇报
2014/01/06 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
社会实践活动总结报告
2014/04/29 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书