从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: ["", ""] }); }); return ( 
 
 
  
 
  
 
 
 ); } } 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(…) 

Answer 1

删除阻止导入语法的插件

问题在于导入语法不是默认的webpack语法。 您已在您的项目中安装了https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md来阻止它，肯定它是反应的一部分 – 创建应用程序内。 请删除它以启用此语法。

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", jQuery: "jquery", "window.jQuery": "jquery" }) ] //other config vars }; 

并添加它：

 import 'owl.carousel'