Question

我想使用Purescript的卤素来编写我的前端的特定组件。

例如，我想使用Halogen创建一个注册表。它看起来如下所示：

try { 
            JsonParser jParser = new JsonParser();
            JSONObject json = jParser.getJSONFromUrl(yourJsonStringUrl);
            JSONObject onlineJsonObj = json.getJSONObject("online");
            JSONObject menJsonObj = online.getJSONObject("men");
            JSONObject clothesJsonObj= menJsonObj.getJSONObject("clothes");
            JSONObject jeanJsonObj= clothesJsonObj.getJSONObject("jean");

                lastname = clothesJsonObj.getString("cost");
                username = clothesJsonObj.getString("size");
                Log.e("Hello", "firstname: " + firstname + ", lastname: "
                        + lastname + ", username: " + username + "star:"
                        + username1);
            } 
        } catch (JSONException e) {
            e.printStackTrace();
        } 
        return null; 
    }

同样，我有一个module RegistrationForm where import Prelude ... -- | The state of the application newtype State = State { email :: String, password :: String } derive instance genericState :: Generic State instance showState :: Show State where show = gShow instance eqState :: Eq State where eq = gEq initialState :: State initialState = State { email: "", password: "" } -- | Inputs to the state machine data Input a = FormSubmit a | UpdateEmail String a | UpdatePassword String a | NoAction a type AppEffects eff = HalogenEffects (ajax :: AJAX, console :: CONSOLE | eff) ui :: forall eff . Component State Input (Aff (AppEffects eff)) ui = component render eval where render :: Render State Input render (State state) = H.div_ [ H.h1_ [ H.text "Register" ] , ... ] eval :: Eval Input State Input (Aff (AppEffects eff)) eval (NoAction next) = pure next eval (FormSubmit next) = do ... eval (UpdateEmail email next) = do ... eval (UpdatePassword password next) = do ... runRegistrationForm :: Eff (AppEffects ()) Unit runRegistrationForm = runAff throwException (const (pure unit)) $ do { node: node, driver: driver } <- runUI ui initialState appendTo ".registration" node模块，用于处理将用户登录到应用程序。

我想知道如何组织我的源代码，构建我的源代码，以及从Javascript调用我的Purescript代码？

目前，我的源代码组织如下：

LoginForm

但是，由于我没有$ cd my-application/ $ tree . ├── bower.json ├── README.md ├── site/ │ └── index.html ├── src/ │ ├── LoginForm.purs │ └── RegistrationForm.purs └── test/ └── Test.purs，我无法执行以下任何操作来构建源代码：

Main.purs

能够将我的purescript代码构建到逻辑javascript文件中会很高兴。例如，$ pulp build --to site/app.js $ pulp browserify --to site/app.js $ pulp server可以构建为src/LoginForm.purs，site/loginForm.js可以构建为src/RegistrationForm.purs。

然后，我可以根据需要在我的实际html页面中加入site/registrationForm.js和loginForm.js。

Answer 1

Pulp并不真正涵盖此用例，它仅适用于只有Main的应用。

我建议使用gulp设置来实现这一点，使用类似这样的gulp文件：

"use strict";

var gulp = require("gulp"),
    purescript = require("gulp-purescript"),
    webpack = require("webpack-stream");

var sources = [
  "src/**/*.purs",
  "bower_components/purescript-*/src/**/*.purs",
];

var foreigns = [
  "src/**/*.js",
  "bower_components/purescript-*/src/**/*.js"
];

gulp.task("make", function() {
  return purescript.psc({
    src: sources,
    ffi: foreigns
  });
});

var mkBundleTask = function (name, main) {

  gulp.task("prebundle-" + name, ["make"], function() {
    return purescript.pscBundle({
      src: "output/**/*.js",
      output: "tmp/js/" + name + ".js",
      module: main,
      main: main
    });
  });

  gulp.task("bundle-" + name, ["prebundle-" + name], function () {
    return gulp.src("tmp/js/" + name + ".js")
      .pipe(webpack({
        resolve: { modulesDirectories: ["node_modules"] },
        output: { filename: name + ".js" }
      }))
      .pipe(gulp.dest("site/js"));
  });

  return "bundle-" + name;
};

gulp.task("bundle", [
  mkBundleTask("loginForm", "LoginForm"),
  mkBundleTask("registrationForm", "RegistrationForm")
]);

gulp.task("default", ["bundle"]);

这可能不太对，但我从SlamData的处理方式中提取它，所以它肯定是在正确的方向上。

Answer 2

使用--to和--main选项pulp build --main LoginForm -O --to site/loginForm.js pulp build --main RegistrationForm -O --to site/registrationForm.js可以实现此目的：

LoginForm

当然，RegistrationForm和main模块都需要导出名为$_SERVER的值才能生效。

如何组成purescript-halogen应用

2 个答案: