详解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中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
js生成随机数的过程解析
Nov 24 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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数据饼图效果实现代码
2011/11/23 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
yii操作cookie实例简介
2014/07/09 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
js获取域名的方法
2015/01/27 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
大学新生欢迎词
2014/01/10 职场文书
党员岗位承诺书
2014/03/25 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫