如何在Browserify中使用React编译Elm

Question

我想在React项目中开始使用Elm，但是他们没有使用Webpack，他们使用的是Browserify和Gulp。如何使用Browserify编译Elm？

Answer 1

最后，我找到的最好的方法是首先编译Elm代码，然后才编译JS。这意味着，与使用elm-webpack-loader时不同，你需要直接从JS形成.elm文件，我必须要求编译的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");