嵌入原生 JavaScript

粘贴原生 JS 代码

首先，如果你在学习 ReScript 时遇到困难，你可以随时将原生 JavaScript 代码粘贴到源文件中：

%%raw(`
// look ma, regular JavaScript!
var message = "hello";
function greet(m) {
  console.log(m)
}
`)

%%raw 这个特殊的 ReScript 调用将你的代码字符串原封不动地粘贴到输出中。从技术上讲，你已经写出了你的第一个 ReScript 文件！

（反引号语法表示多行字符串，这和 JavaScript 类似。除了 ReScript 代码之外，字符串中不需要转义。更多字符串相关内容将在后面的章节介绍。）

%%raw 既让你嵌入顶层的原生 JS 代码，也让你嵌入表达式级别的 JS 代码：

let add = %raw(`
  function(a, b) {
    console.log("hello from raw JavaScript!");
    return a + b
  }
`)

Js.log(add(1, 2))

以上代码：

• 声明一个 ReScript 变量 add

• 它的值为原生 JavaScript 函数声明

• 接着在 ReScript 中调用这个函数

如果你的老板总是担心你的团队成员对 ReScript 不适应，就让他们继续在 ReScript 文件里编写 JavaScript 吧 =)。

调试

在代码中你也可以直接放置 %debugger 表达式：

let f = (x, y) => {
  %debugger
  x + y
}

输出结果为：

JS
function f(x, y) {
  debugger; // JavaScript 开发者工具会在这里设置一个断点并停止运行
  x + y;
}

技巧和诀窍

嵌入原生 JS 片段并不是体验 ReScript 的最佳方式，尽管这种方式在刚开始时非常有用。实际上，最初的几个 ReScript 项目都是这样转换的：

• 将原生 JS 代码片段粘贴到文件中

• 检查 JS 输出（是否与原来的手写 JS 一致）

• 逐步地抽取出一些值和函数，并且保证输出看上去还不错

最后，我们得到一个完全安全的、已转换的 ReScript 文件，其 JS 输出足够干净，我们可以自信地断言，在转换过程中没有引入新的 bug。

我们在这里有一个小指南，指导你逐步进行迭代。有时间可以读一读。