从 webpack 导入 o​​wl.carousel [英] import owl.carousel from webpack

查看：20
本文介绍了从 webpack 导入 o​​wl.carousel的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 F2​​E 世界的新手.我刚刚使用 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';

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

意外的！"在 'imports?jQuery=jquery!owl.carousel' 中.不要使用 import 语法来配置 webpack loader import/no-webpack-loader-syntax

我尝试了另一种语法:

从'owl.carousel'导入owlCarousel

错误是:

未捕获的类型错误:无法读取未定义的属性fn"

有人能帮我弄清楚发生了什么吗?谢谢.

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

加载器:[//用 Babel 处理 JS.{测试:/.(js|jsx)$/,包括:paths.appSrc，loader: 'babel-loader',询问: {缓存目录:findCacheDir({名称:'反应脚本'})}},{测试:/.css$/,loader: 'style!css?importLoaders=1!postcss'},{测试:/.json$/,加载器:'json'},{测试:/.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(?.*)?$/,加载器:'文件'，询问: {name: 'static/media/[name].[hash:8].[ext]'}},{测试:/.(mp4|webm|wav|mp3|m4a|aac|oga)(?.*)?$/,装载机:'网址'，询问: {限制:10000，name: 'static/media/[name].[hash:8].[ext]'}}]

我的组件代码:

import React, { Component } from 'react';导入'./App.css';导入'./css/style.css';导入'./css/bootstrap.min.css';导入'./css/owl.carousel.css';从 './containers/fruit_Selector' 导入 FruitSelector；从./containers/fruit_Detail"导入 FruitDetail；从'jquery'导入$；导入'owl.carousel';类 App 扩展组件 {使成为() {$(document).ready(function(){$(".content-slider").owlCarousel({滑动速度:350，单项:真，自动高度:真，导航:真的，导航文本:["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]});});返回 (<div className="应用程序"><div className="row"><div className="col-sm-4 col-md-3 侧边栏"><水果选择器/>

<div className="col col-md-8"><水果详情/>

);}}导出默认应用程序；

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

插件:[新的 InterpolateHtmlPlugin({PUBLIC_URL: publicUrl}),新的 HtmlWebpackPlugin({注入:真实，模板:paths.appHtml，}),新的 webpack.DefinePlugin(env),新的 webpack.HotModuleReplacementPlugin(),//如果在路径中输入错误大小写，Watcher 将无法正常工作，因此我们使用//当您尝试执行此操作时会打印错误的插件.//参见 https://github.com/facebookincubator/create-react-app/issues/240新的 CaseSensitivePathsPlugin(),//如果你需要一个缺失的模块然后`npm install`它，你仍然有//重新启动 Webpack 的开发服务器以发现它.这个插件//使发现自动进行，因此您不必重新启动.//参见 https://github.com/facebookincubator/create-react-app/issues/186新的 WatchMissingNodeModulesPlugin(paths.appNodeModules)，新的 webpack.ProvidePlugin({$: "jquery",jQuery: "jquery",window.jQuery":jquery"})]

错误提示:

App.js:71 Uncaught TypeError: (0 , _jquery2.default)(...).owlCarousel 不是函数(...)

解决方案

移除阻止导入语法的插件

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

Owl.carousel 需要在其中导入 jQuery 库，因为它使用 $ 变量，所以这是问题，这就是为什么 必须删除 webpack-loader-syntax.

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

未捕获的类型错误:无法读取未定义的属性fn"

<小时>

(替代)使用匀场模块

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

在 webpack 配置中它看起来像:

module.exports = {插件: [新的 webpack.ProvidePlugin({$: "jquery",jQuery: "jquery",window.jQuery":jquery"})]//其他配置变量};

然后添加:

import 'owl.carousel'

I am new to the F2E world. I just created a web application using create-react-app. (https://github.com/facebookincubator/create-react-app)

I wanted to import owl.carousel into my projects, so that I followed the guide of NPM (https://www.npmjs.com/package/owl.carousel) ,which of the syntax is: 

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

but the debugger console indicated the error :

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

I tried another syntax: 

import owlCarousel from 'owl.carousel'

and the error would be:

Uncaught TypeError: Cannot read property 'fn' of undefined

Could somebody help me figure out what happened? thanks.

Update: my webpack loader settings:

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]'
    }
  }
]

my component code:

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;

my webpack.config.dev.js plugin setting:

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"
  })]

the error pops out: 

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

解决方案

Remove plugin which blocks import syntax

Problem is with import syntax which is not default webpack syntax. You have installed in Your project https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md to block it, for sure it is part of react-create-app. Please remove it to enable this syntax.

Owl.carousel needs jQuery library imported inside it because it uses $ variable, so this is problem and it is why webpack-loader-syntax must be removed.

If we try to import owl in standard way then jQuery is not defined there ( every file in webpack has own scope ), so it will throw an error:

Uncaught TypeError: Cannot read property 'fn' of undefined

( Alternative )Use shimming module

If removing plugin is problem then You can try to add jQuery to every module with usage it as shimming module - https://webpack.github.io/docs/shimming-modules.html.

In webpack config it will look like:

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

And just add it by:

import 'owl.carousel'

这篇关于从 webpack 导入 o​​wl.carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆