README

一个易于将转换和压缩的脚本添加到blade组件中的包。

<button class="btn" onlick="myFunction()">{{ $slot }}</button>

<x-script>
function myFunction() {
    // Do something.
}
</x-script>

简介

如果您想在blade组件中添加javascript功能，可以直接在script标签中编写。然而，脚本将不会压缩，如果组件被多次使用，script标签也会被多次包含。

Blade Script解决了这些问题。JavaScript代码可以在生产环境中压缩，每个script标签只包含一次，无需单独运行编译器。同时，只包含所需的脚本。

此外，还有添加转换器如babel的可能性。

安装

该包可以通过composer轻松安装。

composer require cbl/blade-script

现在必须发布必要的资产。这包括script.php配置文件和存储编译脚本的存储文件夹。

php artisan vendor:publish --provider="BladeScript\ServiceProvider"

包含脚本

blade组件x-scripts包含所有所需的脚本，因此它可能放在您的body标签的底部。

<body>
    ...

    <x-scripts />
</body>

使用方法

每个blade组件可以包含一个确切的x-script组件。然后您的脚本可以像这样写在包装器内。

<button class="btn" onlick="myFunction()">{{ $slot }}</button>

<x-script>
myFunction() {
    // Do something.
}
</x-script>

优化脚本

Blade脚本与视图有相同的行为。如视图文档中建议，可以在部署工作流程中添加script:cache命令，以确保所有脚本都被编译，从而提高性能。

php artisan script:cache

您可以使用script:clear命令清除脚本缓存。

php artisan script:clear

编写转换器

您可以轻松地将转换器添加到编译器中，以下示例说明了如何创建和包含转换器。

首先，您必须创建一个实现BladeScript\Contracts\Transpiler契约的转换器类。

namespace BladeBabel;

use Babel\Transpiler as Babel;
use BladeScript\Contracts\Transpiler;

class BabelTranspiler implements Transpiler
{
    public function transpile($script)
    {
        return Babel::transform($script);
    }
}

现在，可以将转换器添加到您的服务提供者中的编译器中。

namespace BladeBabel;

use Illuminate\Support\ServiceProvider;

class BabelServiceProvider extends ServiceProvider
{
    public function register()
    {
        $this->app->afterResolving('script.compiler', function ($compiler) {
            $compiler->addTranspiler(new BabelTranspiler);
        });
    }
}

cbl / blade-script

维护者

详细信息

README

简介

安装

包含脚本

使用方法

优化脚本

编写转换器