JS에서 가져오기/JS로 내보내기

이전에 ReScript의 관용적인 가져오기 및 내보내기가 어떻게 작동 하는지 살펴보았습니다. 이 섹션에서는 JavaScript에서 항목을 가져오고 JavaScript 사용을 위해 항목을 내보내는 방법을 설명합니다.

참고 : JS 생태계의 모듈 호환성 문제로, 어느 때 보다 ReScript 파일의 컴파일된 JS 출력을 탭으로 열어두기를 조언합니다. Babel/Webpack/Jest/Node의 CommonJS<->ES6 호환성을 처리하는 것 외에도, 가져오기/내보내기를 통한 JS 모듈 코드의 미묘하게 잘못된 출력을 원하지 않는다면 말이죠!

즉 : 직접 작성한 JS 코드의 출력 아래에 바인딩을 확인하세요

출력 형식

2가지 JavaScript 가져오기/내보내기 출력 형식을 지원합니다 :

• CommonJS: require('myFile') and module.export = ....
• ES6 modules: import * from 'MyReScriptFile' and export let ....

형식은 bsconfig.json을 통해 구성할 수 있습니다.

자바스크립트에서 가져오기(Import)

자바스크립트 모듈의 유명 내보내기(Named Export)를 가져오기

module external을 사용하세요 :

// Import nodejs' path.dirname
@module("path") external dirname: string => string = "dirname"
let root = dirname("/User/github") // returns "User"

var Path = require("path");
var root = Path.dirname("/User/github");

import * as Path from "path";
var root = Path.dirname("/User/github");

아래는 external이 수행하는 작업입니다.

• @module("path"): JS 모듈의 이름, 이 경우 "path"를 전달합니다. 문자열은 무엇이든 가능합니다 : "/src/myJsFile", "@myNpmNamespace/myLib" 등
• external: JS 측에 존재하는 값을 선언하기 위한 일반 키워드입니다
• dirname: ReScript 측에서 사용할 바인딩 이름입니다
• string => string: dirname의 타입을 정의합니다. externals에 필수적인 요소입니다
• = "dirname": path JS 모듈 내부의 변수 이름입니다. ReScript에서 사용하려는 바인딩 이름이 JS 모듈에서 내보낸 변수 이름과 다른 경우가 있기 때문에, 첫 번째와 두 번째 dirname를 작성하는 반복되는 과정이 존재합니다

자바스크립트 모듈을 단일 값으로 가져오기

모듈에 대한 문자열 인수를 생략하여 전체 JS 모듈에 바인딩합니다.

@module external leftPad: string => int => string = "./leftPad"
let paddedResult = leftPad("hi", 5)

var LeftPad = require("./leftPad");
var paddedResult = LeftPad("hi", 5);

import * as LeftPad from "./leftPad";
var paddedResult = LeftPad("hi", 5);

ReScript를 CommonJS 또는 ES6 모듈로 컴파일하는지에 따라 이 기능은 조금씩 다른 코드를 생성합니다. 차이점을 보려면 두 출력 탭을 모두 확인하세요. 해당 ES6 출력은 틀리게 나올겁니다!

ES6 기본 내보내기(Default Export)를 가져오기

오른쪽에 "default"를 사용하세요 :

@module("./student") external studentName: string = "default"
Js.log(studentName)

import Student from "./student";
var studentName = Student;

자바스크립트로 내보내기(Export)

유명값(Named Value) 내보내기

ReScript의 관용적 가져오기 및 내보내기에서 언급했듯이, 모든 let 바인딩 및 모듈은 기본적으로 다른 ReScript 모듈로 내보내집니다(.resi 인터페이스 파일을 사용하지 않는 한). 컴파일된 JS 파일을 열면, 이러한 값을 JavaScript 파일에서도 직접 사용할 수 있음을 알 수 있습니다.

ES6 기본값(Default Value) 내보내기

JS 프로젝트에서 ES6 모듈을 사용하는 경우, 일부 기본값을 내보내고 가져올 수 있습니다.

// student.js
export default name = "Al";

// teacher.js
import studentName from 'student.js';

JavaScript 기본 내보내기는 개발자들의 편의성을 높인 코드(syntax sugar)로, 사실 암묵적으로 default라 불리는 유명 내보내기 입니다. (이제 아셨을까요?). 따라서 ReScript에서 기본값을 내보내려면 다음과 같이 수행하면 됩니다.

// ReScriptStudent.res
let default = "Bob"

var $$default = "Bob";

exports.$$default = $$default;
exports.default = $$default;
// informal transpiler-compatible marker of a default export compiled from ES6
exports.__esModule = true;

var $$default = "Bob";

export {
  $$default,
  $$default as default,
}

그런 다음 JS 측에서 평소와 같이 이 기본 내보내기를 가져올 수 있습니다 :

// teacher2.js
import studentName from 'ReScriptStudent.js';

자바스크립트의 ES6 기본 가져오기가 Babel/Webpack/Jest에 의해 CommonJS require로 변환되는 경우도 처리하였습니다. 해당 내용은 __esModule에 대한 CommonJS 출력 탭을 참조하세요.