javascript - 将猫头鹰轮播包含到 npm 项目中。一路的
问题描述
很长一段时间想使用owl-carousel但无法通过任何方式连接它npm
webpack
。
npm官网 写的
通过“webpack.ProvidePlugin”将 jQuery 添加到你的webpack 配置中:
const webpack = require('webpack');
//...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
],
//...
我的webpack配置文件中已经有这个配置
加载所需的样式表和 JS:
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
试试麻木1
在这样的配置中(仅将 css 文件更改为 scss)我有以下错误
无法读取未定义的属性“fn”
试试2号
包括也这样不起作用。
import 'imports?jQuery=jquery!owl.carousel';
我收到以下错误Module not found: Error: Can't resolve 'imports' in 'D:\master\my path '
试试3号
import owlCarousel from "owl.carousel";
像第一次尝试一样的错误
我的webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
let conf = {
entry: {
index: "./src/index.js"
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name]bundle.js",
publicPath: "dist/"
},
devServer: {
overlay:true
},
module: {
rules: [
{
test: /\.js/,
loader:"babel-loader",
},
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options: {
url: false,
minimize: true,
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "[name].css"
}),
new HtmlWebpackPlugin({
filename: "index.html",
template: "build/index.html",
hash: true,
chunks: ["index"]
}),
new webpack.ProvidePlugin({
'$': "jquery",
'jQuery': "jquery",
'Popper': 'popper.js',
"Bootstrap": "bootstrap.js"
})
]
};
module.exports = (env, options) => {
let production = options.mode === "production";
conf.devtool = production ? false : "eval-sourcemap";
return conf;
}
在我的项目中,我有 2 个捆绑包
index.js
import $ from "jquery";
import jQuery from "jquery";
import "../styles/main/main.scss";
import "normalize.scss/normalize.scss";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
//in here including owl-config where I config my owl carousel
import * as owlConfig from "./owl-config";
//after this more js code's
第二个owl-config.js我在这个文件中做了所有的尝试
我的依赖
"dependencies": {
"bootstrap": "^4.1.1",
"normalize.scss": "^0.1.0",
"owl.carousel": "^2.2.0",
"jquery": "^3.3.1",
"popper": "^1.0.1"
}
解决方案
问题是我没有正确地做文档中写的
//...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
],
//...
我的webpack.config.js中有什么
new webpack.ProvidePlugin({
'$': "jquery",
'jQuery': "jquery",
'Popper': 'popper.js',
"Bootstrap": "bootstrap.js"
})
我如何改变它和工作的
new webpack.ProvidePlugin({
'$': "jquery",
'jQuery': "jquery",
'window.jQuery': 'jquery',
'Popper': 'popper.js',
"Bootstrap": "bootstrap.js"
})
推荐阅读
- javascript - 无法通过 IIFE 在其中绑定对象方法
- php - Laravel FCM 推送通知不适用于 iOS,但适用于 Android - brozot/laravel-fcm
- html - 填充滚动 flex 容器的 100% 宽度
- spring - 关于 spring Oauth 2 的正确指南
- cordova - 在我的应用程序中应用了科尔多瓦通用链接插件,但是当我在浏览器上打开网站时,应用程序无法自动打开
- javascript - 时刻js中带有日期数字的工作日
- ios - com.google.GTLRErrorObjectDomain 代码=503 在 Firebase 登录目标 C
- scala - 使用 Spark Dataframe 遍历记录并根据某些条件将当前值与先前值连接起来
- sharepoint - 对动态创建的 Sharepoint 文档库使用客户端渲染(js 链接)
- node.js - 如何在带有节点 js 的 Twilio 可编程视频中使用用户自定义名称