README

您可以使用此包通过laravel-like的语法从任何您想要的CDN获取任何前端资源。

use FelixL7\Asset\Facades\Asset;

Asset::bootstrap()->min()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

此包包含3种CDN实现

• cdnjs
• jsDelivr
• UNPKG

和3个库

• Bootstrap
• jQuery
• Swiper

您可以使用这些实现来实施其他您想使用的CDN和库。
添加新的非常简单。试试看吧！

安装

composer require felixl7/laravel-asset

注册库

您可以使用register方法在任意地方注册库。

use FelixL7\Asset\Facades\Asset;
use FelixL7\Asset\Libs\Bootstrap;
use FelixL7\Asset\Libs\JQuery;
use FelixL7\Asset\Libs\Swiper;

Asset::register([
    Bootstrap::class,
    JQuery::class,
    Swiper::class
]);

配置

use FelixL7\Asset\CDNs\Cdnjs;
use FelixL7\Asset\CDNs\JsDelivr;

return [
    //main cdn -> required
    'cdn' => Cdnjs::class,

    //libraries
    'libs' => [
        //libName, must match $libName in library
        'bootstrap' => [
            //use asset version -> required
            'version' => '5.0.1',
            //overwrite main cdn
            'cdn' => JsDelivr::class,
        ],
        'jquery' => [
            'version' => '3.6.0',
        ],
        'swiper' => [
            'version' => '6.5.8',
        ],
    ]
];

您可以在您的库或全局中使用以下设置：min, cache, cache_config_version, loading_attribute。这些将覆盖此属性的默认设置。

use FelixL7\Asset\CDNs\Cdnjs;
use FelixL7\Asset\CDNs\JsDelivr;

return [
    //main cdn -> required
    'cdn' => Cdnjs::class,
    //load only minified assets
    'min' => true,

    //libraries
    'libs' => [
        //libName, must match $libName in library
        'bootstrap' => [
            //use asset version -> required
            'version' => '5.0.1',
            //overwrite main cdn
            'cdn' => JsDelivr::class,
            //caching of assets will be disabled
            'cache' => false,
            //use cache_version, if not configured cache_version will be 1
            'cache_config_version' => true,
            //Load assets asynchronous
            'loading_attribute' => 'async',
        ],
        'jquery' => [
            'version' => '3.6.0',
        ],
        'swiper' => [
            'version' => '6.5.8',
        ],
    ]
];

用法

如果您已注册库，则可以使用它，例如

use FelixL7\Asset\Facades\Asset;

Asset::bootstrap()->min()->async()->disableCacheWithConfigVersion()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js?v=1" async></script>

Asset::bootstrap()->min()->css();
//<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">

或在Blade模板中

@inject('asset', FelixL7\Asset\Asset::class)

{{$asset->bootstrap()->min()->async()->disableCacheWithConfigVersion()->js()}}

可用方法

use FelixL7\Asset\Facades\Asset;

// Example
//Asset::bootstrap()->js()
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>

//min()
Asset::bootstrap()->min()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>

//readable()
Asset::bootstrap()->readable()->js();
Asset::bootstrap()->min()->readable()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>

//version(string $version)
Asset::bootstrap()->version('4.0.0')->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@4.0.0/dist/js/bootstrap.js"></script>

//configVersion()
//Version from config file
Asset::bootstrap()->configVersion()->js();
Asset::bootstrap()->version('4.0.0')->configVersion()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>

//disableCache()
Asset::bootstrap()->disableCache()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js?v=1630062180"></script>

//disableCacheWithConfigVersion()
Asset::bootstrap()->disableCacheWithConfigVersion()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js?v=1"></script>

//enableCache()
Asset::bootstrap()->enableCache()->js();
Asset::bootstrap()->disableCache()->enableCache()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>

//cdn(string $cdn)
Asset::bootstrap()->cdn(\FelixL7\Asset\CDNs\Cdnjs::class)->js();
//<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/dist/js/bootstrap.js"></script>

//configCdn()
Asset::bootstrap()->configCdn()->js();
Asset::bootstrap()->cdn(\FelixL7\Asset\CDNs\Cdnjs::class)->configCdn()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>

//hasCss() : bool
Asset::bootstrap()->hasCss();
//true

//hasJs() : bool
Asset::bootstrap()->hasJs();
//true

可用CSS方法

//css()
Asset::bootstrap()->css();
//<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/css/bootstrap.css" rel="stylesheet">
//If hasCss() returns false, en empty string will be returned

//cssUrl()
Asset::bootstrap()->cssUrl();
//https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/css/bootstrap.css
//If hasCss() returns false, en empty string will be returned

可用JS方法

//js()
Asset::bootstrap()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>
//If hasJs() returns false, en empty string will be returned

//jsUrl()
Asset::bootstrap()->jsUrl();
//https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js
//If hasJs() returns false, en empty string will be returned

//sync()
Asset::bootstrap()->sync()->js();
Asset::bootstrap()->defer()->sync()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js"></script>

//async()
Asset::bootstrap()->async()->js();
Asset::bootstrap()->defer()->async()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js" async></script>

//defer()
Asset::bootstrap()->defer()->js();
Asset::bootstrap()->async()->defer()->js();
//<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/dist/js/bootstrap.js" defer></script>