从 JS 导入/导出到 JS

你已经了解了如何使用 ReScript 惯用的导入和导出。本节将介绍如何从 JavaScript 导入内容并导出内容供 JavaScript 使用。

注意：由于 JS 生态的模块兼容性问题，我们建议将 ReScript 文件编译后的 JS 输出打开在一个选项卡中，这比任何方法都好用。如果你不想微妙地输出错误的 JS 模块导入/导出代码，或是被迫处理 Babel/Webpack/Jest/Node 的 CommonJS <-> ES6 兼容性问题。

简而言之：确保下面绑定的输出和你在 JS 中手动编写的内容对的上。

输出格式

我们支持两种 JavaScript 导入/导出格式：

• CommonJS：require('myFile') 和 module.exports = ...

• ES6 modules：import * from 'MyReScriptFile' 和 export let ...

格式可以通过 bsconfig.json 进行配置。

从 JavaScript 导入

导入 JavaScript 模块的命名导出

使用 module 属性的 external：

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

以下是上面 external 的作用：

• @module("path")：传递 JS 模块的名称；在这里就是 "path"。它可以是任何形式的字符串："./src/myJsFile"，"@myNpmNamespace/myLib"，等等。

• external：用于声明存在于 JS 端的值的通用关键字。

• dirname：将在 ReScript 端使用的绑定名称。

• string => string：dirname 的类型签名，external 必须要有类型签名。

• = "dirname"：JS 模块 path 内的变量名称。在写第一个和第二个 dirname 的时候会重复，因为有时你想在 ReScript 端使用的绑定名称与 JS 模块导出的变量名称不同。

将 JavaScript 模块作为单个值导入

通过省略 module 属性中的字符串参数，你可以绑定到整个 JS 模块：

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

取决于你要将 ReScript 编译到 CommonJS 还是 ES6 module，此特性将生成稍微不同的代码。请检查两个输出选项卡，看看有什么不同。这里的 ES6 输出是错误的！

导入 ES6 的默认导出

在 external 表达式的右边使用 "default"：

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

导出到 JavaScript

导出命名值

正如 ReScript 惯用的导入 & 导出中提到的，默认情况下，每个 let 绑定和模块都会导出到其他 ReScript 模块（除非你使用 .resi 接口文件）。如果打开编译后的 JS 文件，你会看到这些值也可以直接被一个 JavaScript 文件使用。

导出 ES6 默认值

如果你的 JS 项目使用 ES6 模块，你可以导出和导入一些默认值：

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

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

JavaScript 默认导出实际上只是一个隐含的名为 default 的导出的语法糖（现在你知道了！）。因此，要从 ReScript 导出一个默认值，你可以这样做：

// ReScriptStudent.res
let default = "Bob"

然后，你可以像往常一样在 JS 端导入这个默认导出：

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

如果你的 JavaScript 的 ES6 默认导入被 Babel/Webpack/Jest 转换到了 CommonJS 的 require，我们也为你处理好了！请参见 __esModule 的 CommonJS 输出选项卡。