laravel添加jquery和其他js库

最新推荐文章于 2024-05-11 21:19:51 发布

爱番茄的大大

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量163

点赞数 3

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

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

版权

Laravel 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

安装node.js

命令行执行添加js库

//添加jquery
npm install juery;
//添加select2
npm install select2;

js库会安装在/node_modules

检查根目录package.json，是否包含了所需的js库

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.13.13",
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "jquery": "^3.7.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    },
    "dependencies": {
        "postcss": "^8.4.37",
        "select2": "^4.1.0-rc.0"
    }
}

检查根目录webpack.mix.js是否定义了要加入的js库。实例代码是将各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()
    // 提取公用库到单独的文件
    .extract(["jquery", "select2"])
    // 复制Select2的CSS到public目录
    .copy(
        "node_modules/select2/dist/css/select2.min.css",
        "public/css/select2.min.css"
    )
    // 复制jQuery和Select2的JS到public目录（若extract不满足需求）
    .copy("node_modules/jquery/dist/jquery.min.js", "public/js/jquery.min.js")
    .copy(
        "node_modules/select2/dist/js/select2.min.js",
        "public/js/select2.min.js"
    );

命令提示符下进入项目目录，执行如下操作，将对如上设定进行操作：

npm run dev

操作完成，blade文件加入js代码


    <script src="{{ mix('js/jquery.min.js') }}"></script>
    <script src="{{ mix('js/select2.min.js') }}"></script>
    <script src="{{ mix('js/manifest.js') }}" defer></script>
    <script src="{{ mix('js/vendor.js') }}" defer></script>
    <script src="{{ mix('js/app.js') }}" defer></script>

    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">

//defer用于页面完成后引用