Question

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

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");

如何在Browserify中使用React编译Elm

1 个答案: