前言
@[TOC]
在前端开发中，对于一些比较复杂的项目，我们经常会使用到各种第三方的包来实现功能。npm 是前端开发中很常见的一个包管理器，它能够帮助我们方便地添加、更新、删除依赖包。而在 npm 上，有一个功能强大的包叫做 @glennsl/bs-revamp，它能够实现将 OCaml 代码编译为 JavaScript 代码，这对于一些需要使用函数式编程的项目来说非常有用。
本篇文章将介绍如何使用 @glennsl/bs-revamp，涵盖了从安装到基本使用再到实现一些高级功能的全部过程。
安装
在使用 @glennsl/bs-revamp 之前，需要先进行安装。可在终端输入如下命令完成安装：
npm install -g @glennsl/bs-revamp
以上命令会全局安装 @glennsl/bs-revamp，以便在任何项目中使用它。
基本使用
将 OCaml 代码编译为 JavaScript 代码
假设我们有一个 helloworld.ml 文件，代码如下：
let () = Js.log "Hello World!"
要将它编译为 JavaScript 代码，执行如下命令：
bsc -format js helloworld.ml > helloworld.js
其中 -format js 表示指定输出格式为 JavaScript，helloworld.ml 表示要编译的 OCaml 文件，> helloworld.js 表示将输出重定向到 helloworld.js 文件中。
在 HTML 页面中加载编译后的 JavaScript 文件
在上一步中，我们将 helloworld.ml 文件编译为了 helloworld.js 文件。现在我们需要在一个 HTML 页面中加载它。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ -- ---------- ------------ ------- ------ ------- ------------------------------- ------- -------
以上代码中，我们将 helloworld.js 文件通过 <script> 标签引入到 HTML 页面中。
现在，打开 HTML 页面就能看到浏览器控制台输出了 "Hello World!"。
在命令行中执行编译
在我们对 OCaml 代码做出修改之后，可能需要重新编译。如果每次都在终端中输入 bsc -format js helloworld.ml > helloworld.js 命令会非常麻烦。因此，我们可以使用 bsb 工具来监听文件变化并执行编译命令。
- 在项目根目录下创建
bsconfig.json文件，并在其中写入以下内容：
-- -------------------- ---- -------
-
------- ------ ------- -------
---------- -
------ ------
---------- ----
--
------------------ -----------------
--------- -
------------ -
-
-- 执行如下命令开始监听文件变化：
bsb -w
这样，每当在 src 目录中有文件变化时，bsb 工具就会自动重新编译。
示例代码
下面是一个将两个数字相加的简单示例。
OCaml 代码
在项目根目录下创建 add.ml 文件，并将以下代码写入其中：
let add x y = x + y
JavaScript 代码
执行以下命令将 OCaml 代码编译为 JavaScript 代码：
bsc -format js add.ml > add.js
在 HTML 页面中使用编译后的 JavaScript 文件
在项目根目录下创建 index.html 文件，并将以下代码写入其中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
------- ------------------------
--------
--- ------ - ------ ---
--------------------
---------
-------
------
-------
-------查看结果
在终端中进入项目根目录，并执行 http-server 命令，然后在浏览器中访问 http://localhost:8080/index.html，就能在浏览器控制台中看到输出结果。
高级功能
与 React 集成
@glennsl/bs-revamp 与 React 集成非常方便。下面是一个使用 React 实现的加法器示例。
安装依赖
首先，需要安装 bs-platform 和 reason-react 依赖。
npm install --save-dev bs-platform reason-react
编写 OCaml 代码
在项目根目录下创建 Add.re 文件，并将以下代码写入其中：
-- -------------------- ---- -------
--- --------- -
--------------------------------------
--- ---- -
---- --- --
----------- ------- ----- --
-------------------------- --
----------------------- ------ --- ---
---------------------------------- - ---
-----以上代码中，我们定义了一个名为 Add 的 stateless 组件，在其中使用了加法计算，并将计算结果作为字符串渲染到了页面上。
编译
执行以下命令将 OCaml 代码编译为 JavaScript 代码：
bsc -format js Add.re > Add.js
在 HTML 页面中使用编译后的 JavaScript 文件
在项目根目录下创建 index.html 文件，并将以下代码写入其中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---- ----------- ------------
------- ------------------------
-------
------
---- ----------------
--------
--- --- - -------------- ------
-------------------- ---------------------------------
---------
-------
-------查看结果
在终端中进入项目根目录，并执行 http-server 命令，然后在浏览器中访问 http://localhost:8080/index.html，就能在页面中看到输出结果。
与 Webpack 集成
如果你的项目使用了 Webpack 进行打包，那么如何集成 @glennsl/bs-revamp 呢？以下是完整的配置过程：
- 安装必要依赖
npm install --save-dev webpack webpack-cli webpack-dev-server @glennsl/bs-loader
其中：
webpack：Web 应用的打包工具webpack-cli：Webpack 的命令行工具webpack-dev-server：Webpack 配合开发的服务器bs-loader：将 OCaml 代码编译为 JavaScript 代码的 webpack loader
- 修改项目文件结构
在项目根目录下创建 src 和 src/App.re，并将以下代码写入其中：
-- -------------------- ---- -------
--- --------- -
--------------------------------------
--- ---- -
--------- -- -
--- ----- - ----------------------- -- -- ---
----------- ------- ----- --
-------------------------- --
----------------------- ------ --- ---
-----------------------------------------
------------------------- ------
----------------------------- --
----------------------- --
-------------------
-----------------------
--- ----------------------------- -- ----------------- - ------
----
--以上代码中，我们定义了一个名为 App 的 stateless 组件，在其中使用了 Hook 并实现了加法计数器的功能。
- 修改
bsconfig.json文件
在 bsconfig.json 文件中修改 "subdirs": true 为 "subdirs": false，这样我们才能在 Webpack 中正确引入 OCaml 代码。
- 修改 Webpack 配置文件
在项目根目录下创建 webpack.config.js，并将以下代码写入其中：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
---------- -
------------ --------- - --------
----- ----
--
------- -
------ -
-
----- -------------
-------- ---------------
---- -
-
------- ------------
-------- -
------- ------
--------- ----
-
-
-
-
-
--
-------- -
----------- ------- ------ ------ -------
-
--以上代码中，我们定义了 Webpack 的入口文件为 src/index.js，输出文件为 dist/bundle.js。在加载 OCaml 文件时，我们使用了 bs-loader，为编译器提供了正确的参数。
- 创建 HTML 页面
在项目根目录下创建 index.html 文件，将以下代码写入其中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---- ----------- ------------
------- ---------------------------
-------
------
---- ----------------
--------
--- --- - -----------
-------------------- ---------------------------------
---------
-------
-------- 编写入口 JavaScript 文件
在项目根目录下创建 src/index.js 文件，并将以下代码写入其中：
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App.re';
ReactDOM.render(<App />, document.getElementById('root'));以上代码中，我们首先使用 es6 的模块化语法引入了 React、ReactDOM 和 App.re，然后在入口文件中使用了 ReactDOM.render 将 App 组件渲染到页面中。
- 进行打包
在终端中输入以下命令，将 OCaml 代码打包为 JavaScript 代码：
webpack --mode=development
然后，在终端中执行以下命令，开启 Webpack Dev Server 服务器：
webpack-dev-server --open
这样，我们就完成了 @glennsl/bs-revamp 在 Webpack 中进行集成的全部步骤。
总结
本篇文章介绍了 @glennsl/bs-revamp 的使用方法，包括基本的编译操作、在 HTML 页面中加载编译后的 JavaScript 文件、在命令行中执行编译、高级功能的实现以及与 React 和 Webpack 的集成。希望这篇文章能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e7781e8991b448e7491