将 React 组件与 Pux 集成——require() 从何而来？

Question

Pux 文档告诉我在浏览器中使用 require()。该功能来自哪里以及如何使用它？

背景：

我正在尝试将 Quill 编辑器与我使用 purescript-pux 的 Web 应用程序集成。在 Pux documentation 之后，我创建了一个文件 MyEditor.js，如下所示：

// module MyEditor
var React = require("react");
var Pux = require("purescript-pux");
var MyEditor = React.createClass({
    displayName: "MyEditor",
    onTextChange: function onTextChange(value) {
        this.setState({ text: value });
    },
    render: function render() {
        return React.createElement(ReactQuill, { value: this.state.text,
                                                 onChange: this.onTextChange });
    }
});
exports.fromReact = Pux.fromReact(MyEditor);

和一个文件MyEditor.purs如下：

module MyEditor where
import Pux.Html (Html, Attribute)
foreign import fromReact :: forall a. Array (Attribute a) -> Array (Html a) -> Html a

然后我在我的 Html Action 中使用 MyEditor.fromReact [value p.description] 并且代码编译，但浏览器抱怨 ReferenceError: require is not defined。

我对 javascript 生态系统不是很熟悉。我知道有几个提供 require() 函数的库存在，但我应该将哪个库与 Pux 一起使用以及如何使用？

Answer 1

require 是 NodeJS 导入模块的方式，浏览器不支持它，因此您需要通过 bundler 运行您的项目像 browserify 或 webpack 来生成浏览器可以理解的包。

如果您使用 pulp 构建工具，它就像运行ning

一样简单

pulp browserify --to app.js

然后通过脚本标记将 app.js 加载到您的 html 中。

pulp browserify 文档：https://github.com/bodil/pulp#commonjs-aware-builds

Answer 2

除了 Christophs 的回答（但不能评论，因为评论不允许代码块）：

使用 Thermite 4.1.1 这对我有用：

添加一个 package.json 文件：

{
  "dependencies": {
    "react": "^0.14",
    "react-dom": "^0.14"
  }
}

运行 npm install

从那时起 pulp browserify --optimise 将整个 shebang 打包。

这真的很糟糕，我在 purescript-react.

上打开了一个关于它的问题

将 React 组件与 Pux 集成——require() 从何而来？

Integrating React components with Pux - where does require() come from?

javascript

quill

purescript

purescript-pux