文档章节

require 和import 区别是什么?

帅的人连bug都讨厌
 帅的人连bug都讨厌
发布于 2017/07/18 18:48
字数 1735
阅读 23
收藏 0

这个不是react特有的,而是js共有的。require方法是CommonJs推出的,NodeJs自带了这个功能。而import是ES6推出的

第二问:ES6中require和import等价吗?

用ES6开发中,我们的代码中,会多一种模块引入语法,那就是import。import会被转化为commonjs格式或者是AMD格式,所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的,你也不用费劲再把它转成AMD了。

所以如下写法是等价的:
import list from './list';
//等价于
var list = require('./list');

第三问:转 webpack中require和import的区别

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.ensurerequire.ensure([], function(require){ var list = require('./list');});

很显然,你在写代码的时候还是需要对打包结果进行决策,这是我不喜欢webpack的原因。gulp那样多好,编码就是编码,编译就是编译,分开来。不过这就是webpack以模块为核心的打包方式的特点吧,仁者见仁,只要团队内做一个约定,也不会打的一塌糊涂。
如果你是新手,对commonjs以及AMD的各自特点还不太清楚,推荐去看一下我之前写的这篇:js模块化历程

© 著作权归作者所有

帅的人连bug都讨厌
粉丝 3
博文 53
码字总数 40134
作品 0
杭州
程序员
私信 提问
nodejs开发——require与exports的使用

版权声明:本文为博主原创文章,欢迎分享到其它技术社区,分享请标明出处: https://blog.csdn.net/CHENYUFENG1991/article/details/54807974 在前面几篇博客中,我们始终在学习如何进行nod...

乞力马扎罗的雪CYF
2017/02/01
0
0
webpack解惑:require的五种用法

"webpack解惑:require的五种用法" commonjs同步语法 经典的commonjs同步语法如下: 此时webpack会将a.js打包进引用它的文件中。这是最普遍的情形,不必赘述。 commonjs异步加载 在commonjs中...

想到你走远
2017/12/27
0
0
Perl中use、require的用法和区别

Exporter Module usage implements an import method which allows a module to export functions and variables to its users' namespaces. package YourModule;require Exporter;@ISA = qw......

SibylY
2014/05/22
0
0
为什么JavaScript需要模块化开发?

为什么需要模块化开发? 随着代码复杂程度的提高, 项目也变得越来越难维护, JavaScript模块化 也因此油然而生, 这应该是大家最熟悉的一种加载方式, 但是缺点也比较明显 所有的模块都处于全局...

前端攻城老湿
2018/12/31
0
0
ES6与CommonJS中的模块处理的区别

ES6和CommonJS都有自己的一套处理模块化代码的措施,即JS文件之间的相互引用。 为了方便两种方式的测试,使用nodejs的环境进行测试 CommonJS的模块处理 使用require来引入其他模块的代码,使...

peakedness丶
2018/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部