require의 5가지 용도 소개

이 글은 webpack에 대한 자세한 설명과 require의 5가지 사용법을 주로 소개하는데, 관심 있는 친구들은 참고하시면 됩니다.

commonjs 형식의 require 동기화 구문은 webpack으로 작성할 수 있습니다. 형식에는 콜백 구문이 필요하며, require.ensure도 있고 webpack에서 자체적으로 정의한 require.include도 있고 ES6 가져오기 구문과 결합되어 많은 것들이 사람들을 혼란스럽게 할 것입니다. 이 문서에서는 이러한 요구 사항의 특성과 해당 요구 사항이 사용되는 시나리오를 정리합니다.

commonjs 동기화 구문

클래식 commonjs 동기화 구문은 다음과 같습니다.

var a = require('./a');
a.show();

이때 webpack은 a.js를 참조하는 파일로 패키징합니다. 이는 가장 일반적인 상황이므로 자세히 설명할 필요가 없습니다.

commonjs 비동기 로딩

commonjs에는 require.ensure 구문을 정의하는 Modules/Async/A 사양이 있습니다. Webpack은 이를 구현하며, 그 기능은 패키징 중에 코드를 조각화하고 조각화된 코드를 비동기적으로 로드하는 것입니다. 사용법은 다음과 같습니다.

require.ensure([], function(require){

  var list = require('./list');

  list.show();

});

이때 list.js는 다음과 같은 별도의 청크 파일로 패키징됩니다.

1.fb874860b35831bc96a8.js

가독성이 상대적으로 떨어집니다. 또한 이전 기사의 끝 부분에서 이름을 지정하는 방법은 다음과 같이 require.ensure에 세 번째 매개변수를 전달하는 것이라고 언급했습니다.

require.ensure([], function(require){

  var list = require('./list');

  list.show();

}, 'list');

이 방법으로 원하는 파일 이름을 얻을 수 있습니다.

list.fb874860b35831bc96a8.js

"question/list"와 같은 계층 이름을 전달할 수도 있으므로 webpack은 계층에 따라 폴더를 생성합니다.

require.ensure의 function에서 두 개 이상의 모듈을 참조하는 경우 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를 다운로드하지만 목록은 실행되지 않습니다. .webpack 공식 웹사이트에 명시된 js 모듈의 코드는 평가되지 않습니다. 실제로 평가를 하게 되면 다음과 같은 문장이 나옵니다. var list = require('./list'); 이른바 지연 실행(Lazy Execution)입니다.

함수로 작성된 여러 모듈이 함께 패키징되며 이는 위와 다르지 않습니다. 또한 배열에 작성된 모듈도 수동으로 실행하는지 여부에 관계없이 함께 패키지됩니다.

이런 작성 방법도 commonjs와 AMD를 조합한 것처럼 조금 어색하고, 모듈 이름을 두 번 써야 하는데 정말 우아하지 않습니다. 따라서 webpack은 사전 로딩을 구현하기 위한 자체 메소드를 정의합니다.

webpack과 함께 제공되는 require.include

require.include는 webpack 자체에서 제공하는 백엔드에 대한 사양이 없으므로 작은 역할을 합니다. 배열에 모듈을 작성하지 않고도 위의 preloading 기능을 구현할 수 있습니다. 사용법은 다음과 같습니다.

require.ensure([], function(require){

  require.include('./list');//此处只加载不执行

});

webpack 공식 웹사이트 문서에 따르면 require.include에는 하위 모듈에 공용 부분을 로드하는 기능도 있습니다. 예를 들어 child1과 child2는 모두 list.js 모듈을 참조합니다. list.js가 상위 모듈에 포함되어 있으면 하위 모듈의 콘텐츠가 삭제됩니다. 상위 모듈. (여기서 말하는 부자관계는 참고관계를 의미합니다.)

이 방법도 관계자가 잠깐 언급한 바 있는데, 쓸데없고 별 쓸모가 없는 것 같습니다. require.include의 반환 값이 정의되지 않은 것을 발견했기 때문에, 즉 모듈을 사용하려는 경우 자세는 다음과 같습니다.

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 가져오기

这年头不用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以模块为核心的打包方式的特点吧，仁者见仁，只要团队内做一个约定，也不会打的一塌糊涂。

위 내용은 require의 5가지 용도 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!