如何正确地将js库添加到laravel项目

如何解决如何正确地将js库添加到laravel项目

我正在尝试使用gijgo.js库中的treeview插件。一切在一个干净的示例项目中都可以正常工作- 库：jquery，bootstrap，gijgo（所有版本均与不工作的Laravel Project相同）已下载并手工包含在简单的index.html中；但是，该插件无法在基于Laravel框架的项目中运行，npm会将脚本正确编译到/public/js/app.js，浏览器控制台未报告任何错误，但页面看上去并不符合预期。我现在所做的：

我正在将Laravel 7.18与ui引导程序一起使用
使用npm install gijgo --save安装了gijgo.js
myfiles：

package.json

{
    "private": true,"scripts": {
        "dev": "npm run development","development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js","watch": "npm run development -- --watch","watch-poll": "npm run watch -- --watch-poll","hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js","prod": "npm run production","production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },"devDependencies": {
        "axios": "^0.19","bootstrap": "^4.0.0","cross-env": "^7.0","jquery": "^3.2","laravel-mix": "^5.0.5","lodash": "^4.17.19","popper.js": "^1.12","resolve-url-loader": "^2.3.1","sass": "^1.20.1","sass-loader": "^8.0.0","vue": "^2.5.17","vue-template-compiler": "^2.6.10"
    },"dependencies": {
        "gijgo": "^1.9.13"
    }
}

资源/js/bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

资源/js/app.js

require('./bootstrap');
require('gijgo');

var data = [{"id":1,"text":"Asia","population":null,"flagUrl":null,"checked":false,"hasChildren":false,"children":[{"id":2,"text":"China","population":1373541278,"flagUrl":"https://code.gijgo.com/flags/24/China.png","children":[]},{"id":3,"text":"Japan","population":126730000,"flagUrl":"https://code.gijgo.com/flags/24/Japan.png",{"id":4,"text":"Mongolia","population":3081677,"flagUrl":"https://code.gijgo.com/flags/24/Mongolia.png","children":[]}]},{"id":5,"text":"north America","children":[{"id":6,"text":"USA","population":325145963,"flagUrl":"https://code.gijgo.com/flags/24/United%20States%20of%20America(USA).png","children":[{"id":7,"text":"California","population":39144818,{"id":8,"text":"Florida","population":20271272,{"id":9,"text":"Canada","population":35151728,"flagUrl":"https://code.gijgo.com/flags/24/canada.png",{"id":10,"text":"Mexico","population":119530753,"flagUrl":"https://code.gijgo.com/flags/24/mexico.png",{"id":11,"text":"South America","children":[{"id":12,"text":"Brazil","population":207350000,"flagUrl":"https://code.gijgo.com/flags/24/brazil.png",{"id":13,"text":"Argentina","population":43417000,"flagUrl":"https://code.gijgo.com/flags/24/argentina.png",{"id":14,"text":"Colombia","population":49819638,"flagUrl":"https://code.gijgo.com/flags/24/colombia.png",{"id":15,"text":"Europe","children":[{"id":16,"text":"England","population":54786300,"flagUrl":"https://code.gijgo.com/flags/24/england.png",{"id":17,"text":"Germany","population":82175700,"flagUrl":"https://code.gijgo.com/flags/24/germany.png",{"id":18,"text":"Bulgaria","population":7101859,"flagUrl":"https://code.gijgo.com/flags/24/bulgaria.png",{"id":19,"text":"Poland","population":38454576,"flagUrl":"https://code.gijgo.com/flags/24/poland.png","children":[]}]}];

$(function() {
    $('#tree').tree({
            uiLibrary: 'bootstrap4',dataSource: data,primaryKey: 'id',imageUrlField: 'flagUrl'
    });
});

其余是导致布局和查看的标准请求处理 app.blade.PHP

<!doctype html>
<html lang="{{ str_replace('_','-',app()->getLocale()) }}">
<head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1">

    <!-- CSRF Token -->
    <Meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name','treeView Example') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    
    <!-- Scripts -->
    <script src="https://kit.fontawesome.com/8e33cf2cfe.js" crossorigin="anonymous"></script>
    <script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>

tree.blade.PHP

@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div id="tree"></div>
    </div>
@endsection

这是最终外观：

我怀疑这是在LaravelMix / webpack级别上进行编译的问题，因为我已经安装了该库而没有任何问题，浏览器控制台不会报告任何错误，但是脚本不起作用。也许这是在已编译的app.js中添加js库的顺序（但在这种情况下，我认为浏览器应提供“未定义的功能”）。

如何使其正常工作？

请精确提示，因为我是Laravel和所有这些前端（laravelmix，webpack）产品的初学者。感谢您的帮助

解决方法

我会在标头而不是正文中加载Javascript依赖项/脚本。该主题在另一个线程上有一个有趣的答案：Where to insert JavaScript Libraries and CSS in my HTML code?

我错过了gijgo的CSS。

/resources/js/app.js 应该如下所示：

require('./bootstrap');
require('gijgo');
require('gijgo/css/gijgo.css');

(...)

感谢laracasts注意到错误的webartisan7。

如何正确地将js库添加到laravel项目

如何解决如何正确地将js库添加到laravel项目

解决方法

相关推荐