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未定义（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的副作用而导入，你应该使用上面为此目的设计的重要样式。这更清楚，并且在优化器尝试树木未使用的导入时也不会中断。

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

Answer 2

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

明确地npm install它，以便它显示在你的package.json中。
将其作为普通脚本包含在您的html文件中，正如Chris G所提到的那样。

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

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

使用Jquery和React（FlipClock）

2 个答案: