1

设置

我有一个现有的 elixir/phoenix 网络应用程序

带有 vanillajs / React 的前端（通过 react-phoenix）。

我正在使用早午餐来捆绑所有东西。

目标

我希望我现有的 js react 组件能够导入和使用 reason-react 组件。

我相信我现在有明确的理由工作（一个简单的 .re hello world 生成一个 .bs.js 可以导入到我的 js react 中）。

但是在使用原因反应时它会中断。

问题

我复制了介绍示例以制作一个原因反应组件，并从教程中复制代码以将其与 js 集成。但是当我尝试从一个工作的 js 文件中导入它时，chrome 控制台显示：

控制台错误

原因反应

所以在我看来，生成的 .bs.js 文件正确调用了 reason-react 包。并且该包正确地尝试调用 bs-platform 包，但找不到它。

通过 node_modules 挖掘，我可以确认 bs-platform/lib/js/curry.js 确实存在。

文件

问候.re

/* file: Greeting.re */

let component = ReasonReact.statelessComponent("Greeting");

/* underscores before names indicate unused variables. We name them for clarity */
let make = (~name, _children) => {
  ...component,
  render: (_self) => <button> {ReasonReact.string("Hello " ++ name ++ "!")} </button>
};

[@bs.deriving abstract]
type jsProps = {
  name: string,
};

let jsComponent =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(
      ~name=jsProps->nameGet,
      [||],
    )
  );

生成 Greeting.bs.js

    // Generated by BUCKLESCRIPT VERSION 4.0.5, PLEASE EDIT WITH CARE
'use strict';

var React = require("react");
var ReasonReact = require("reason-react/src/ReasonReact.js");

var component = ReasonReact.statelessComponent("Greeting");

function make(name, _) {
  return /* record */[
          /* debugName */component[/* debugName */0],
          /* reactClassInternal */component[/* reactClassInternal */1],
          /* handedOffState */component[/* handedOffState */2],
          /* willReceiveProps */component[/* willReceiveProps */3],
          /* didMount */component[/* didMount */4],
          /* didUpdate */component[/* didUpdate */5],
          /* willUnmount */component[/* willUnmount */6],
          /* willUpdate */component[/* willUpdate */7],
          /* shouldUpdate */component[/* shouldUpdate */8],
          /* render */(function () {
              return React.createElement("button", undefined, "Hello " + (name + "!"));
            }),
          /* initialState */component[/* initialState */10],
          /* retainedProps */component[/* retainedProps */11],
          /* reducer */component[/* reducer */12],
          /* jsElementWrapped */component[/* jsElementWrapped */13]
        ];
}

var jsComponent = ReasonReact.wrapReasonForJs(component, (function (jsProps) {
        return make(jsProps.name, /* array */[]);
      }));

exports.component = component;
exports.make = make;
exports.jsComponent = jsComponent;
/* component Not a pure module */

导入它：

const Greeting = require('./Greeting.bs.js').jsComponent

bsconfig.json

{
  "name" : "my-app",
  "reason" : { "react-jsx" : 2},
  "bs-dependencies": ["reason-react", "bs-webapi"],
  "namespace": true,
  "refmt": 3,
  "suffix": ".bs.js",
  "sources": [
    {
      "dir": "js",
      "subdirs": true
    }
  ],
  "package-specs": {
    "module": "commonjs",
    "in-source": true
  }
}

早午餐-config.js

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  paths: {
    watched: ["static", "css", "js", "vendor"],
    public: "../priv/static"
  },

  plugins: {
    postcss: {
        processors: [
            require('autoprefixer')(['last 8 versions']),
            require('csswring')()
        ]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

编辑：添加了 brunch-config.js

4

0 回答 0