Bypass Bundler의 require 문 감지

이 기사에서는 React 소스 코드가 번들러의 require 문 감지를 우회하는 방법을 분석합니다.

문자열 "require"를 난수(Math.random())와 연결하여 코드는 "require"처럼 보이지만 정적 분석 중에 번들러에서 직접 인식할 수 없는 문자열을 생성합니다. 그런 다음 문자열을 분할하여 처음 7자를 가져오고 결과가 항상 "require"가 되도록 합니다("require" Math.random()은 "require0.123456"과 같은 결과를 가져오며 "require"로 분할됩니다). .

이 모든 문제는 Node 환경에서 사용할 수 있는 setImmediate라는 MacroTask를 호출하는 데 있습니다.

즉시 설정

일부 코드를 비동기적으로 실행하려는 경우

하지만 가능한 한 빨리 Node.js에서 제공하는 setImmediate() 함수를 사용하는 것이 좋습니다.

setImmediate(() => {
 // run something
});

setImmediate() 인수로 전달된 모든 함수는 이벤트 루프의 다음 반복에서 실행되는 콜백입니다.

Nodejs Docs에서 setImmediate에 대해 자세히 알아보세요.

왜 번들러의 요구 사항 감지를 피해야 합니까?

브라우저 환경에는 Node.js 모듈이 필요하지 않습니다.

React는 Node.js 환경(setImmediate가 사용되는 곳)과 브라우저 환경(MessageChannel이 사용되는 곳)을 구별해야 합니다. 번들러가 require를 감지하면 자동으로 브라우저 번들에 Node.js 폴리필을 포함할 수 있는데, 이는 불필요하고 코드를 부풀릴 수 있습니다.

실수로 폴리필을 포함하지 마세요.

Webpack과 같은 번들러는 요구 사항을 감지할 때 Node.js API용 폴리필을 포함하는 경우가 많습니다. 이는 폴리필이 불필요하고 환경 처리를 위한 React 자체 로직(브라우저 대 Node.js)을 방해할 수 있는 React와 같은 경량 라이브러리에서는 문제가 됩니다.

이 enqueueTask는 ReactAct.js에서 사용되는 대체 메소드입니다

// $FlowFixMe[invalid-computed-prop]
const nodeRequire = module && module[requireString];
// assuming we're in node, let's try to get node's
// version of setImmediate, bypassing fake timers if any.
enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;

타이머는 Node.js의 핵심 모듈입니다. 특정 간격으로 또는 지연 후에 코드 실행을 예약하는 데 사용할 수 있는 타이머 기능 세트를 제공합니다. 이러한 기능은

의 전역 타이머 기능과 유사합니다. JavaScript(예: setTimeout 및 setInterval)이지만 추가 제어 및 정확성을 위해 타이머 모듈의 일부로 제공됩니다.

<p>nodeRequire.call(module, 'timers')</p>

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에 사용되는 고급 코드베이스 아키텍처 개념을 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배, 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

우리는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo(별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 hello@thinkthroo.com으로 문의하세요!

참고자료:

1. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L23

2. https://nodejs.org/en/learn/asynchronous-work/understanding-setimmediate

3. https://nodejs.org/api/timers.html#setimmediatecallback-args

위 내용은 Bypass Bundler의 require 문 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!