jquery – 从webpack导入owl.carousel

我是F2E世界的新手.
我刚刚使用create-react-app创建了一个Web应用程序. ( https://github.com/facebookincubator/create-react-app)

我想将owl.carousel导入到我的项目中,因此我遵循NPM(https://www.npmjs.com/package/owl.carousel)的指南,其语法是：

import $from 'jquery';
import 'imports?jQuery=jquery!owl.carousel';

但调试器控制台指出错误：

Unexpected '!' in 'imports?jQuery=jquery!owl.carousel'. Do not use      import Syntax to configure webpack loaders import/no-webpack-loader-Syntax

我尝试了另一种语法：

import owlCarousel from 'owl.carousel'

而错误将是：

Uncaught TypeError: Cannot read property 'fn' of undefined

有人可以帮我弄清楚发生了什么吗？谢谢.

更新：我的webpack加载器设置：

loaders: [
  // Process JS with Babel.
  {
    test: /\.(js|jsx)$/,include: paths.appSrc,loader: 'babel-loader',query: {
      cacheDirectory: findCacheDir({
        name: 'react-scripts'
      })
    }
  },{
    test: /\.css$/,loader: 'style!css?importLoaders=1!postcss'
  },{
    test: /\.json$/,loader: 'json'
  },{
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,loader: 'file',query: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  },{
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,loader: 'url',query: {
      limit: 10000,name: 'static/media/[name].[hash:8].[ext]'
    }
  }
]

我的组件代码：

import React,{ Component } from 'react';
import './App.css';
import './css/style.css';
import './css/bootstrap.min.css';
import './css/owl.carousel.css';
import FruitSelector from './containers/fruit_Selector';
import FruitDetail  from './containers/fruit_Detail';
import $from 'jquery';
import 'owl.carousel';

class App extends Component {
render() {
$(document).ready(function(){

  $(".content-slider").owlCarousel({
      slideSpeed: 350,singleItem: true,autoHeight: true,navigation: true,navigationText: ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"]
  });
});

return (
  <div className="App">
  <div className="row">
    <div className="col-sm-4 col-md-3 sidebar">
      <FruitSelector/>
    </div>
    <div className="col col-md-8">
        <FruitDetail/>
    </div>
    </div>
  </div>
);
}
}

export default App;

我的webpack.config.dev.js插件设置：

plugins: [

new InterpolateHtmlPlugin({
  PUBLIC_URL: publicUrl
}),new HtmlWebpackPlugin({
  inject: true,template: paths.appHtml,}),new webpack.DefinePlugin(env),new webpack.HotModuleReplacementPlugin(),// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),// If you require a missing module and then `npm install` it,you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),new webpack.ProvidePlugin({
      $: "jquery",jQuery: "jquery","window.jQuery": "jquery"
  })]

弹出错误：

App.js:71 Uncaught TypeError: (0,_jquery2.default)(...).owlCarousel is not a function(…)

解决方法

删除阻止导入语法的插件

问题在于导入语法不是默认的webpack语法.您已在项目https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md中安装了阻止它,确定它是react-create-app的一部分.请删除它以启用此语法.

Owl.carousel需要在其中导入jQuery库,因为它使用$variable,所以这是问题,这就是必须删除webpack-loader-Syntax的原因.

如果我们尝试以标准方式导入owl,那么jQuery没有在那里定义(webpack中的每个文件都有自己的范围),所以它会抛出一个错误：

Uncaught TypeError: Cannot read property 'fn' of undefined

(备选方案)使用匀场模块

如果删除插件有问题,那么您可以尝试将jQuery添加到每个模块,并将其用作填充模块 – https://webpack.github.io/docs/shimming-modules.html.

在webpack配置中,它看起来像：

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
    $: "jquery","window.jQuery": "jquery"
    })
]
//other config vars
};

并添加它：

import 'owl.carousel'