12、在 JavaScript 应用中集成 Elm 实现图片上传功能

在 JavaScript 应用中集成 Elm 实现图片上传功能

1. 背景与目标

在前端开发中，我们常常会接触到大量的 JavaScript 代码。而 Elm 作为一种具有类型安全、无运行时异常等优点的语言，受到了很多开发者的喜爱。但在实际工作中，将整个 JavaScript 应用重写成 Elm 可能并不现实，因为这会耗费大量时间，影响新功能的开发。不过，我们可以在现有的 JavaScript 应用中使用 Elm 来构建新功能，逐步将 JavaScript 应用迁移到 Elm。

2. 嵌入 Elm 应用

假设我们正在维护一个基于 JavaScript 和 React 的生产力应用，包含日历、联系人管理、笔记工具等功能。产品经理提出了一个新需求，让用户可以向笔记中上传图片。我们可以先从在 React 应用中嵌入一个 Elm 应用开始，来实现图片上传按钮的显示。

2.1 创建图片上传应用

• 准备工作 ：从代码下载处获取现有应用，将 code/javascript/migrate-js-to-elm 目录下的内容复制到自己的 migrate-js-to-elm 目录中。
  • 运行 npm install 下载依赖。
  • 运行 npm start 启动应用，开发服务器将在 http://localhost:3000 启动。