Laravel添加jquery

爱番茄的大大

于 2024-03-15 13:45:08 发布

阅读量394

点赞数 9

分类专栏： Laravel 文章标签： laravel jquery php

本文链接：https://blog.csdn.net/u014095714/article/details/136737574

版权

Laravel 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章介绍了如何在Laravel项目中通过命令行安装jQuery并在webpack.mix.js中设置，以便在构建过程中将其暴露给全局，并使用ProvidePlugin确保jQuery可用。

摘要由CSDN通过智能技术生成

命令提示符在项目根目录执行：

npm install jquery --save-dev

项目根目录webpack.mix.js更新内容：

const mix = require("laravel-mix");
const path = require("path");
const webpack = require("webpack");
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js("resources/js/app.js", "public/js")
    .react()
    .sass("resources/sass/app.scss", "public/css")
    .css("resources/css/app.css", "public/css")
    .sourceMaps()
    // 引入 jQuery 并将其暴露给全局作用域
    .webpackConfig({
        resolve: {
            alias: {
                "@": path.resolve("resources/js"),
                // 将 jQuery 暴露给 window.$ 和 window.jQuery
                jquery: "jquery/src/jquery",
            },
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.$": "jquery",
                "window.jQuery": "jquery",
            }),
        ],
    });