require 和 import,都是为了JS模块化使用。最近项目中,因为多人协同开发,出现了一个项目中同时使用了require 和 import 引入依赖的情况。正常情况下,一个项目中最好是对引入方式做一个规范。下面我们就来看一下require 和 import的区别:

一.require
  require是Commonjs的规范,node应用是由模块组成的,遵从commonjs的规范。用法:

 a.js

function test (args) {
// body...
console.log(args);
} module.exports = {
test
};
b.js let { test } = require('./a.js'); test('this is a test.');

require的核心概念:在导出的文件中定义module.exports,导出的对象类型不予限定(可为任意类型)。在导入的文件中使用require()引入即可使用。本质上,是将要导出的对象,赋值给module这个对象的exports属性,在其他文件中通过require这个方法来访问exports这个属性。上面b.js中,require(./a.js) = exports 这个对象,然后使用es6取值方式从exports对象中取出test的值。

二.import
import是es6为js模块化提出的新的语法,import (导入)要与export(导出)结合使用。用法:

a.js:

export function test (args) {
// body...
console.log(args);
} // 默认导出模块,一个文件中只能定义一个
export default function() {...}; export const name = "lyn";
b.js: // _代表引入的export default的内容
import _, { test, name } from './a.js'; test(`my name is ${name}`);

三、commonjs模块与ES6模块的区别
    1.commonjs输出的,是一个值的拷贝,而es6输出的是值的引用;

2.commonjs是运行时加载,es6是编译时输出接口;

文章目录
概念
一、ES6模块化的使用
、es6中的export
、es6中的import
二、CommonJs规范的使用
、CommonJs中的exports
、CommonJs中的require
三、CommonJs规范与ES6中import的区别
、引入模块的不同点
、引入模块的性能不同点
、暴露模块的不同点
四、在nodeJs中怎么使用
概念
CommonJs是一种模块化规范,在ES6之前的,用于服务器端nodeJs和浏览器端。 ES6标准发布后,模块化标准是以export指令导出接口,以import引入模块。 但是在node模块中,我们依旧很多地方采用的是CommonJS规范
即:使用module.exports导出接口,使用require引入模块。 这两种方式我们或多或少都有用过,只是不了解这是2种不同的规范 一、ES6模块化的使用
es6中模块化靠export { }暴露导出模块,靠import ... from '...'引入模块 、es6中的export
模块js使用export命令输出变量 注意:这里输出的必须是变量,而不能是值(包括方法) 注意:export命令不需要=,只要后面跟一个变量即可 正确示例:
// 直接暴露
export var test = 'Michael'; // 设置变量暴露
var test = 'Michael';
export {
test
}
错误示例:
// 直接暴露
export ; //报错
// 设置变量暴露 var test = ;
export test; //报错 以上错误的原因,是因为export命令后面不是变量而是一个值,即使是赋值给了test,它也是一个值(方法同理)。
正确用法中是把值包在了对象里{ test }
、es6中的import
目标文件,使用import ... form '...'引入模块(前提是暴露模块正确) import命令引入没什么坑,主要延伸是结合ES6的解构赋值 普通引入示例
import fs from 'fs' //引入整个fs模块 var test = fs.star(....) //调用fs模块中的star方法 解构引入示例
import { stat,readFile } from 'fs' //引入fs模块中的stat,readFile方法,其余不引入 var test = star(....) //调用fs模块中的star方法 二、CommonJs规范的使用
CommonJs规范靠exports.xx = xx或module.exports = { xx }暴露导出模块。
靠var xx = require('...')或var { stat, exists, readFile } = require('fs');引入模块 、CommonJs中的exports
注意:这里的exports不是一个命令
注意:这里的exports是有s的,且后面需要使用=,这里我的理解,exports自身是变量,引入就是依靠这个变量进行的 使用exports示例
var test = ;
exports.test = test; 使用module.exports示例
var test = ;
module.exports = {
test
} 、CommonJs中的require
导入也没什么坑,同样可以使用解构 普通引入示例
var fs = require('fs') //引入整个fs模块 var test = fs.star(....) //调用fs模块中的star方法 解构引入示例
var { stat,readFile } = require('fs') //引入fs模块中的stat,readFile方法,其余不引入 var test = star(....) //调用fs模块中的star方法 三、CommonJs规范与ES6中import的区别
、引入模块的不同点
require('xx')可以直接作为一个对象,也就是可以直接当成变量来使用,不赋值。如:require('xx').star(...)
而es6的import ... form ...是固定写法,不能操作
、引入模块的性能不同点
CommonJs规范的引入require('xx')是“运行时加载” 而es6的import ... form ...是按需引入,编译过程按照import命令来选择编译 、暴露模块的不同点
在上面使用介绍,暴露模块的区别已经很明显了:
es6的export命令不用=暴露一个变量(一般为对象)
CommonJs的exports.xx=xx,是依靠exports变量自身来暴露的
四、在nodeJs中怎么使用
我们都知道es6是绝对通用的规范,且会更新到es7、es8等。而既然es6有模块化的方法,那么CommonJs规范将逐步被替换。
但是现在而言,import、export等很多es6命令,还需要依靠编译成es5来实现。
比如在vue-cli当中,es6的使用就需要依赖webpack的babel进行编译成es5。
所以在nodeJs中如果不引入babel或其他方法来编译es5的话,依旧需要老老实实使用CommonJs规范。
ndoeJs使用es6import、export命令的解决方法,可以看阮一峰老师的ECMAScript6,.mjs后缀文件名
本文参考阮一峰老师的ECMAScript6 与一些关于js编译与运行的博客

.

require与import的更多相关文章

  1. 转:彻底搞清楚javascript中的require、import和export

    原文地址:彻底搞清楚javascript中的require.import和export   为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...

  2. 008_Node中的require和import

    一.js的对象的解构赋值 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuri ...

  3. NodeJS中的require和import

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  4. vue 更新了vue-cli到最新版本后引发的问题: require和import、vue-loader的问题

    "vue-loader": "^12.1.0", "vue-loader": "^12.1.0", "vue- ...

  5. javascript中的require、import和export模块文件

    CommonJS 方式 文件输出如math.js: math.add = function(a,b){ return a+b; }exports.math = math; 文件引入: math = r ...

  6. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  7. Node中没搞明白require和import,你会被坑的很惨

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  8. require和import的使用

    一.前言 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引 ...

  9. Node中导入模块require和import??

    转自:https://blog.csdn.net/wxl1555/article/details/80852326 S6标准发布后,module成为标准,标准的使用是以export指令导出接口,以im ...

随机推荐

  1. 浅谈集群版Redis和Gossip协议

    昨天的文章写了关于分布式系统中一致性哈希算法的问题,文末提了一下Redis-Cluster对于一致性哈希算法的实现方案,今天来看一下Redis-Cluster和其中的重要概念Gossip协议. 1.R ...

  2. 查找节点(getAttribute())

    getAttribute():方法将返回一个给定元素的一个给定属性节点的值: attributeValue = element.getAttribute(attributeName); 给定属性的名字 ...

  3. warning: rpmts_HdrFromFdno: Header V4 DSA/SHA1 Signature, key ID XXXXXX: NOKEY

    我在使用Centos时,会出现这种错误: 本人实践有效的办法是: 加上"--nogpgcheck"参数 就是在你要执行的语句后面加上该参数就行了! 我当时是为了安装jenkins时 ...

  4. 计算机通过远程连接登录windows虚拟机具体配置流程

    1.打开一台windows虚拟机右击开始,选择——计算机———属性 2.点击允许运行任意版本远程桌面虚拟机连接,点击确定 3.打开服务管理器——用户,如图我一会要用”lisi“用户远程登录此虚拟机 4 ...

  5. IDEA 更改提示一键补全快捷键

    偏好设置-->KeyMap-->用关键字搜索可以用下面图中的任意词只要能定位到就是可以的 (Choose Lookup Item Replace)然后增加想用的键,个人喜欢直接加一个空格

  6. mysql那些事(6) WHERE条件 字符串的引号

    前言:所谓的坑,两个意思,一个是软件本身的bug,一个是使用者常犯的错误. phper在日常开发中经常和mysql打交道.特别是在没有分层的中小应用中,phper开发要关注sql语句的实现. 入正题, ...

  7. 使用WebClient实现断点续传 重写

    早上下个东西,半天不动,火冒三丈,我可是100M光纤... WebClient.Httpclient.HttpWebRequest.WebRequest 我选了了WebClient因为他封装的够好 断 ...

  8. Asp.Net WebApi一个简单的Token验证

    1.前言: WebAPI主要开放数据给手机APP,Pad,其他需要得知数据的系统,或者软件应用.Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能.我上次写的<Asp.Net MV ...

  9. Linux---centos7.0安装、配置

    参考:https://blog.csdn.net/qq_37057095/article/details/81240450

  10. php数组去重、魔术方法、redis常用数据结构及应用场景

    一.用函数对数组进行去重的方法 1.arrau_unique函数的作用 移除数组中重复的值. 将值作为字符串进行排序,然后保留每个值第一次出现的健名,健名保留不变. 第二个参数可以选择排序方式: SO ...