> 웹 프론트엔드 > JS 튜토리얼 > Node에서 require 및 import 사용법에 대한 자세한 소개

Node에서 require 및 import 사용법에 대한 자세한 소개

巴扎黑
풀어 주다: 2017-08-15 10:20:30
원래의
1638명이 탐색했습니다.

이 글은 Node에서 import 모듈의 require와 import의 차이점에 대한 자세한 설명을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

ES6 표준이 출시된 후 모듈이 표준이 되었습니다. 표준 사용은 내보내기 명령으로 인터페이스를 내보내고 가져오기로 모듈을 도입하는 것입니다. 그러나 우리는 일반적인 노드 모듈에서는 요구 사항을 사용합니다. 모듈을 소개하고 모듈 내보내기 인터페이스를 사용하십시오.

require와 import를 지우지 않으면 향후 표준 프로그래밍에서 보기 흉해질 것입니다.

요구 시대의 모듈

노드 프로그래밍에서 가장 중요한 아이디어 중 하나는 모듈이며, 이 아이디어가 대규모 JavaScript 프로젝트를 가능하게 합니다. js계에서는 모듈러 프로그래밍이 인기가 있으며, 이를 기반으로 한 이후 브라우저 측에서는 requirejs, seajs 등의 툴킷도 등장했습니다. 해당 사양에서는 ES6 이전의 모든 모듈러 프로그래밍이 지배적이었다고 할 수 있습니다. , 지금도 ES6 모듈이 완전히 구현될 때까지는 여전히 그렇습니다.

Node의 모듈은 CommonJS 사양을 따르고, requirejs는 AMD를 따르고, seajs는 CMD를 따르지만, 우리는 여전히 상대적으로 통일된 코드 스타일을 유지하기를 희망합니다.


// a.js

// -------- node -----------
module.exports = {
 a : function() {},
 b : 'xxx'
};

// ----------- AMD or CMD ----------------
define(function(require, exports, module){
 module.exports = {
  a : function() {},
  b : 'xxx'
 };
});
로그인 후 복사

높은 수준의 스타일 균일성을 유지하기 위해 브라우저 측 모듈에서 정의 함수를 사용하여 모듈 폐쇄를 제공하는 것을 제외하고 다른 코드는 완전히 일관될 수 있음을 알 수 있습니다.


// b.js

// ------------ node ---------
var m = require('./a');
m.a();

// ------------ AMD or CMD -------------
define(function(require, exports, module){
  var m = require('./a');
  m.a();
});
로그인 후 복사

도 사용법이 매우 유사합니다. AMD 또는 CMD가 더 풍부한 스타일을 제공하지만 우리 기사에서는 주로 노드 환경에 대해 설명하므로 이를 확장하지는 않습니다.

ES6의 모듈

ES6에서 출시된 모듈은 CommonJS를 직접 사용하지 않으며 require도 사용하지 않습니다. 즉, require는 여전히 노드의 비공개 전역 메서드이고 module.exports는 노드의 비공개 메서드일 뿐입니다. . 전역 변수 속성은 표준 0.5센트와 관련이 없습니다.

내보내기 내보내기 모듈 인터페이스

내보내기 사용법은 꽤 복잡합니다. 여기에서 자세한 내용을 볼 수 있습니다. 다음은 몇 가지 예입니다.


// a.js
export default function() {}
export function a () {}

var b = 'xxx';
export {b}; // 这是ES6的写法,实际上就是{b:b}
setTimeout(() => b = 'ooo', 1000);
export var c = 100;
로그인 후 복사

내보낼 인터페이스 앞에 내보내기 명령을 추가합니다.

내보내기 후에 b도 수정할 수 있는데, 이는 CommonJS와 크게 다릅니다. 이 글에서는 뻔뻔하게도 이를 생략합니다.

다음 구문에는 심각한 오류가 있습니다.


// 错误演示
export 1; // 绝对不可以
var a = 100;
export a;
로그인 후 복사

인터페이스를 내보낼 때 모듈 내부 변수와 일대일 대응이 있어야 합니다. 1을 직접 내보내는 것은 의미가 없으며, 가져올 때 이에 해당하는 변수를 갖는 것도 불가능합니다. 내보내기 a가 유효한 것처럼 보이지만 a의 값은 숫자이고 전혀 분해할 수 없으므로 내보내기 {a} 형식으로 작성해야 합니다. 기능에 a를 할당하더라도 허용되지 않습니다. 또한 대부분의 스타일에서는 모든 인터페이스를 내보내려면 모듈 끝에 내보내기를 사용하는 것이 가장 좋다고 제안합니다. 예:


export {fun as default,a,b,c};
로그인 후 복사

import import module

import 구문은 require와 다릅니다. import는 파일의 시작 부분에 배치되어야 하며 앞에는 다른 논리 코드가 허용되지 않습니다. 이는 다른 모든 프로그래밍 언어의 스타일과 일치합니다.

가져오기의 사용법은 내보내기와 동일하며 여기에서 일반적인 이해를 얻을 수 있습니다. 몇 가지 예를 들면 다음과 같습니다.


import $ from 'jquery';
import * as _ from '_';
import {a,b,c} from './a';
import {default as alias, a as a_a, b, c} from './a';
로그인 후 복사

여기에는 몇 가지 함정이 있는데, 이에 대해서는 당분간 공개하지 않겠지만 아래에서 논의하겠습니다.

중괄호 뒤에 오는 가져오기 형식이 가장 기본적인 사용법입니다. 중괄호 안의 변수는 내보내기 후의 변수에 해당합니다. 여기서는 객체 구조 분해 및 할당에 대한 지식을 이해해야 합니다. 이 지식이 없으면 여기서 전혀 뽐낼 수 없습니다. 구조 분해 할당을 이해하면 여기서 "일대일 대응" 관계를 자세히 이해할 수 있습니다.

as 키워드

프로그래밍 학생들이 쉽게 이해할 수 있는 as입니다. 내보내기에서도 사용할 수 있고, 실제로 가져오기에서도 사용할 수 있습니다:


// a.js
var a = function() {};
export {a as fun};

// b.js
import {fun as a} from './a';
a();
로그인 후 복사

위 코드는 내보내기를 했을 때 외부 세계에 제공되는 인터페이스가 재미있습니다. 이것이 바로 a 내부 함수의 별칭입니다. Node.js이지만 모듈 외부에서는 a를 인식할 수 없으면 fun만 인식할 수 있습니다.

import의 as는 매우 간단합니다. 모듈에서 메서드를 사용할 때 현재 파일에서 사용할 수 있도록 메서드에 별칭을 지정합니다. 그 이유는 때때로 두 개의 서로 다른 모듈이 동일한 인터페이스를 전달할 수 있기 때문입니다. 예를 들어 재미있는 인터페이스도 전달하는 c.js가 있습니다.


// c.js
export function fun() {};
로그인 후 복사

b.js에서 a와 둘 다를 사용하는 경우 두 개의 모듈 c를 사용하려면 인터페이스 이름 중복 문제를 해결하는 방법을 찾아야 합니다.

default 키워드

다른 사람들은 튜토리얼을 작성하고 내보내기 부분에 default를 넣어두는데, 제 생각에는 이해에 도움이 되지 않는 것 같습니다. 내보낼 때 기본값을 사용할 수 있습니다. 직설적으로 말하면 별칭의 구문 설탕입니다.


// d.js
export default function() {}

// 等效于:
function a() {};
export {a as default};
로그인 후 복사

가져올 때 다음과 같이 사용할 수 있습니다.


import a from './d';

// 等效于,或者说就是下面这种写法的简写,是同一个意思
import {default as a} from './d';
로그인 후 복사

이 구문 설탕의 장점 import When 이면 중괄호 {}를 생략할 수 있습니다. 간단히 말하면, 가져올 때 변수가 중괄호(* 기호 없음)로 묶이지 않은 것을 발견하면 중괄호를 염두에 두고 as 구문으로 복원해야 합니다.

所以,下面这种写法你也应该理解了吧:


import $,{each,map} from 'jquery';
로그인 후 복사

import后面第一个 $ 是 {defalut as $} 的替代写法。

*符号

*就是代表所有,只用在import中,我们看下两个例子:


import * as _ from '_';
로그인 후 복사

在意义上和 import _ from '_'; 是不同的,虽然实际上后面的使用方法是一样的。它表示的是把 '_' 模块中的所有接口挂载到 _ 这个对象上,所以可以用 _.each调用某个接口。

另外还可以通过*号直接继承某一个模块的接口:


export * from '_';

// 等效于:
import * as all from '_';
export all;
로그인 후 복사

*符号尽可能少用,它实际上是使用所有export的接口,但是很有可能你的当前模块并不会用到所有接口,可能仅仅是一个,所以最好的建议是使用花括号,用一个加一个。

该用require还是import?

require的使用非常简单,它相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数……再把require的结果赋值给某个变量,相当于把require和module.exports进行平行空间的位置重叠。

而且require理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,比如:


require('./a')(); // a模块是一个函数,立即执行a模块函数
var data = require('./a').data; // a模块导出的是一个对象
var a = require('./a')[0]; // a模块导出的是一个数组
로그인 후 복사

你在使用时,完全可以忽略模块化这个概念来使用require,仅仅把它当做一个node内置的全局函数,它的参数甚至可以是表达式:


require(process.cwd() + '/a');
로그인 후 복사

但是import则不同,它是编译时的(require是运行时的),它必须放在文件开头,而且使用格式也是确定的,不容置疑。它不会将整个模块运行后赋值给某个变量,而是只选择import的接口进行编译,这样在性能上比require好很多。

从理解上,require是赋值过程,import是解构过程,当然,require也可以将结果解构赋值给一组变量,但是import在遇到default时,和require则完全不同: var $ = require('jQuery'); 和 import $ from 'jquery' 是完全不同的两种概念。

上面完全没有回答“改用require还是import?”这个问题,因为这个问题就目前而言,根本没法回答,因为目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require。这也是为什么在模块导出时使用module.exports,在引入模块时使用import仍然起效,因为本质上,import会被转码为require去执行。

但是,我们要知道这样一个道理,ES7很快也会发布,js引擎们会尽快实现ES6标准的规定,如果一个引擎连标准都实现不了,就会被淘汰, ES6是迟早的事 。如果你现在仍然在代码中部署require,那么等到ES6被引擎支持时,你必须升级你的代码,而如果现在开始部署import,那么未来可能只需要做很少的改动。

위 내용은 Node에서 require 및 import 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿