如何在浏览器中使用 React 编译 Elm

Question

我想在React项目中开始使用Elm，但他们没有使用Webpack，而是使用Browserify和Gulp。如何让 Elm 使用浏览器进行编译？

Answer 1

最后，我发现最好的解决方法是先编译Elm代码，然后再编译JS。这意味着，与使用elm-webpack-loader时不同，您可以要求.elm文件直接从JS形成，我必须要求编译的elm代码。

这是一个 Gulp 任务，用于将目录或其任何子目录中的所有Main.elm文件编译为单个.js文件。然后，您可以要求模块具有

import { Widget1, Widget2 } from "../compilation-folder/myapp.js" 

任务如下：

const path = require("path");
// const execSync = require("child_process").execSync;
const shell = require("gulp-shell");
const glob = require("glob");
// Compiles all Main.elm files in a specified src folder and its subfolders
// into the output file specified
module.exports = (src, dest, outname) => {
const output = path.join(dest, `${outname}`);
return done => {
glob(src + "/**/Main.elm", {}, (err, filesArray) => {
const files = filesArray.join(" ");
shell.task(`elm-make --yes ${files} --output=${output}`)(done)
})
}
};

你可以像这样使用它：

const buildElm = require("./fileWithCodeAbove.js")
gulp.task("build-elm", buildElm("./elm-directory", "./build-directory", "myapp.js");