如何在 Browserify 中使用 React 编译 Elm

Question

我想开始在 React 项目中使用 Elm，但他们没有使用 Webpack，而是使用带有 Gulp 的 Browserify。如何让 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

How to compile Elm with React in Browserify

browserify

elm

reactjs