使用 Jquery 和 React (FlipClock)

Question

我从 create-react-app 创建了一个 react 应用。 现在我想使用 jquery FlipClock 插件来简单地渲染一个翻转时钟（仅此而已）。

package.json

{
       "name": "flip-clock",
       "version": "0.1.0",
       "private": true,
       "dependencies": {
       "flipclock": "^0.8.2",
       "react": "^16.3.2",
       "react-dom": "^16.3.2",
       "react-scripts": "1.1.4"
  },
  "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test --env=jsdom",
       "eject": "react-scripts eject"
  }
}

App.js

import React, { Component } from 'react';
import $ from 'jquery';
import FlipClock from 'flipclock'

class App extends Component {

  constructor() {
    super();
  }

  componentDidMount(){
    $('.App').FlipClock(3600 * 24 * 3,{clockFace: 'DailyCounter',
    countdown: true
  });
  }

  shouldComponentUpdate(){
    return false;
  }

  render() {
    return (
      <div className="App" />
    );
  }
}

export default App;

我得到 jQuery is not defined(flipcopy.js) ref error 和其他各种错误（这对我来说毫无意义）。

我推测的是，flipcopy.js 无法从其 npm 模块中解析其 jquery 依赖项。 提前致谢

Answer 1

使用 Webpack 的 provide plugin 填充插件期望的全局变量，将其映射到您安装的 npm:jquery。

import webpack from 'webpack';

export default {
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery' // provide a global named jQuery loading it as the export from the module 'jquery'
    }),
    // etc.
  ],
  // etc. 
};

然后更改您的导入以更好地反映其语义

import React from 'react';
import $ from 'jquery';
import 'flipclock';

class App extends React.Component {...}

由于您从不使用 Flipclock 的默认导出，假设它甚至有一个，而是因为它对 jQuery 的副作用而导入，您应该使用上面为此目的设计的重要样式。当优化器尝试对未使用的导入进行 treeshake 时，这一点更清晰，也不会中断。

理想情况下，我们不会有任何全局，但我们是否需要一个取决于flipclock 对jquery 的使用。 SystemJS 之类的工具可以解决这个问题。

Answer 2

如果你想使用jQuery，你可以做两件事......

1. 明确npm install 它，以便它显示在您的 package.json 中。
2. 如 Chris G 所述，将其作为普通脚本包含在您的 html 文件中。

如果你走第二条路线，那么你需要在你的 componentDidMount() 方法中引用它之前做这样的事情。

const $ = window.$; 
$('.App').(do_some_stuff);