详解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 相关文章推荐
json简单介绍
Jun 10 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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
PHP 已经成熟
2006/12/04 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
js图片上传的封装代码
2017/08/01 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
vue实现购物车小案例
2019/09/27 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
开水果连锁店创业计划书
2013/12/29 职场文书
网络维护中文求职信
2014/01/03 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2014年妇联工作总结
2014/11/21 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
小学美术教学反思
2016/02/17 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技