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

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

我对javascript生态系统不太熟悉。我知道有几个提供require（）函数的库存在，但是我和Pux使用哪个库以及如何使用？

Answer 1

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

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

一样简单

pulp browserify --to app.js

然后通过脚本标记在html中加载app.js。

纸浆浏览器文档：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（）来自哪里？

2 个答案: