猫头鹰旋转木马在使用vite构建项目后不起作用

Question

我使用vite来构建这个项目。当我从node_modules使用owl-carousel时，它在开发模式下工作，但在构建之后，carousel停止工作，并得到这个错误

Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
at index.781bd673.js:4:36786
at index.781bd673.js:4:37392

所以我使用了CDN。

<script type="module">
// CDN --> working after build 
// import 'https://code.jquery.com/jquery-3.2.1.slim.min.js';
// import 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js';
// node_modules --> not working after build
import './node_modules/jquery/dist/jquery.slim.min.js';
import './node_modules/owl.carousel/dist/owl.carousel.min.js';
// customize owl carousel
import './src/js/owl-carousel.js';
</script>

如何在没有错误的情况下从node_modules使用它？？

Answer 1

导出jQuery全局

// jquery.js file 
import $ from 'jquery'; // from node_modules
window.jQuery = $;
export default $;

并将其导入owl-carousel.js

// owl-carousel.js file
import $ from './jquery.js';
import 'owl.carousel'; // from node_modules
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 20,
autoplay: true,
responsive: {
0: {
items: 1,
},
600: {
items: 2,
},
1000: {
items: 3,
},
},
});
});

Answer 2

下面来自@Asmaa Mahmoud的回答对我不起作用。下面是我的解决方案。我希望这能帮助其他在同样问题上挣扎的人。

vite.config.js文件：

import { defineConfig } from 'vite';
import inject from '@rollup/plugin-inject';
import htmlPurge from 'vite-plugin-purgecss';
export default defineConfig({
plugins: [
inject({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
htmlPurge(),
],
css: {
devSourcemap: true,
},
});

app.js文件：

import './app.scss';
import 'owl.carousel/dist/assets/owl.carousel.css';
import $ from 'jquery';
import 'lazysizes';
import 'owl.carousel';
$(function(){
$('.owl-carousel').owlCarousel({});
});