将 flot 与 NPM、React 和 Node 一起使用答案

【问题标题】：Using flot with NPM, React, and Node将 flot 与 NPM、React 和 Node 一起使用
【发布时间】：2016-04-23 19:19:33
【问题描述】：

我正在尝试在 Node.js React 项目中使用 flot。 Flot 不会导入。我在浏览器控制台中收到以下错误：

Uncaught TypeError: _jquery2.default.plot is not a function

功能相同

$.plot is not a function

这是我的组件代码：

import $ from 'jquery';
import flot from 'flot';
import React from 'react';
import component from './jsxComponent';

const LinePlot = component('LinePlot', {
    componentDidMount () {
        $.plot($("#placeholder"), [[0, 5], [1, 10], [2, 15], [3, 20]]);
    }
}, function ({someParams}) {
    return(
        <div id="placeholder"></div>
    );
});

export default LinePlot;

npm 安装成功，Flot 包含在我的 /node_modules/ 目录中，并且我在上面的组件代码中包含 flot 之前的 jquery。

console.log(flot); //returns an empty object (Object {})

以前有没有人用 Node+NPM+Flot 成功过？如果是这样，您是如何导入的？

提前致谢。

【问题讨论】：

NPM 上似乎不再存在 (npmjs.com/package/flot)
也许试试这个github.com/flot/flot/issues/1381
查看 repo，它似乎也没有作为 commonJS 或 AMD 模块导出。
@PI。我尝试更新我的依赖项以包含 "Flot": "git+https://github.com/flot/flot.git#v0.8.3" 并再次运行 npm install ，同时将 LinePlot.js 更改为 import Flot from 'Flot'; 但我仍然遇到相同的错误

标签： javascript jquery node.js reactjs npm

【解决方案1】：

我将 Gulp 与 babel、browserify 和 browserify-shim 模块一起使用，这对我有用：

package.json

"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.min.js",
  "flot": "./node_modules/flot/jquery.flot.js"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "jquery": "$",
  "flot": {
    "exports": "flot",
    "depends": [
      "jquery:jQuery"
    ]
}

main.js

import $ from 'jquery';
import 'flot';

$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ]);

【讨论】：

【解决方案2】：

问题可能是您正在导入实际模块，而不是仅将其包含在 import 'flot' 的文件中。我假设是这样，因为每个项目似乎都是这样做的。

也就是说，在您的用例中，通过使用 React 的外部库 (jQuery) 操作 DOM 可能不是最佳选择。我知道在这种情况下它不会破坏任何东西，但是有一些 React 库具有干净和简单的 API，可以做同样的事情（甚至更多）。

我会试试Recharts。

【讨论】：