ReScript in Korean

변수 인라인하기

원문

때때로, 여러분은 자바스크립트 출력에서 특정값이 강제적으로 인라인되는 것을 원할 수 있습니다. 예를 들면:

if (process.env.mode === 'development') {
console.log('Dev-only code here!');
}

그 이유는 여러분의 자바스크립트 번들러(웹팩 등)가 위 코드를 다음과 같이 변환할 수 있기 때문입니다:

if ('production' === 'development') {
console.log('Dev-only code here!');
}

이 다음에 동작하는 Uglifyjs최적화는 if문 전체를 제거하게 됩니다. 이것이 리액트같은 프로젝트들이 많은 양의 개발 경고를 포함한 개발 모드를 제공하는 동시에, uglified (minified)된 프로덕션 코드에 이렇게 비용이 많이 들어가는 블록이 없도록 하는 방법입니다.

그래서 리스크립트에서는 해당 예제 if (process.env.mode === 'development')와 같은 출력을 생성하는 것이 중요합니다. 예시로 아래의 첫 번째 코드는 동작하지 않습니다:

@bs.val external process: 'a = "process"
let mode = "development"
if (process["env"]["mode"] === mode) {
Js.log("Dev-only code here!")
}
var mode = 'development';
if (process.env.mode === mode) {
console.log('Dev-only code here!');
}

자바스크립트는 if (process.env.mode === mode)를 출력하며, 이것은 우리가 원하는 결과가 아닙니다. 원하는 결과를 위해서 mode의 값을 인라인하려면, @bs.inline을 사용하십시오.

@bs.val external process: 'a = "process"
@bs.inline
let mode = "development"
if (process["env"]["mode"] === mode) {
Js.log("Dev-only code here!")
}
if (process.env.mode === 'development') {
console.log('Dev-only code here!');
}

이제 결과로 나온 여러분의 자바스크립트 코드는 나머지 자바스크립트 코드처럼 웹팩과 Uglifyjs를 통과할 수 있으며, 이러한 과정에서 console.log는 모두 제거됩니다.

인라인은 현재 문자열, 실수값, 논리값에서만 동작합니다.

팁과 트릭

이것은 최적화를 위한 것이 아닙니다. 이것은 사용자들이 조건부 컴파일등의 자바스크립트 후처리 단계에서 인라인된 특정 값을 필요로 할 때 사용하는 극단적인 기능입니다. 조건부 컴파일에 의해서 출력되는 코드의 차이 이외에, 자바스크립트 엔진의 관점에서 단순히 값을 인라인하는 것과 하지않는 것 사이에는 성능 차이가 없습니다.