Регистрация vue компонентов в пакете Laravel

Question

Я очень старался зарегистрировать компонент vue в моем собственном тестовом пакете, разработанном для laravel. Я даже проверил laravel \ horizon и некоторые другие пакеты, но не могу понять, как это сделать. Я слежу за Laravel Разработкой пакета

, поэтому мой пакет находится за пределами моего приложения Laravel. И моя структура пакета выглядит следующим образом:

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

Для компонента vue это просто пример Laravel, а для приложения. js, в принципе, ничего не изменилось, потому что это только для целей тестирования. Я попытался скопировать компоненты vue в ресурсы \ js \ compnents с помощью команды vendor: publi sh, она копирует их, но все еще не зарегистрирована в приложении. js. Итак, вопрос в том, каков наилучший способ регистрации vue компонентов в Laravel пакете или поставщике? Как Laravel Horizon пакет регистрирует свои компоненты, я проверил весь исходный код Laravel / horizon, нет такой команды, как "npm run" или копирование компонентов и добавление их в какое-то место в основном приложении, это выглядит как npm проверяет файлы поставщика, ища пакет. Файл json в laravel / horizon, а затем регистрирует компоненты. если это так, почему мои vue компоненты не зарегистрированы.

Answer 1

Laravel Путь Horizon:

Так что после прочтения всего кода Laravel Horizon я смог понять, как это выглядит ниже:

1- Сначала вы регистрируете свои vue компоненты, такие как Laravel, например, example-component в приложении. js. поэтому вам нужно создать собственное приложение. js для пакета Laravel внутри ресурсов \ js:

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

2-секундный файл webpack.mix. js в файле root вашего пакета и скопируйте ваше приложение. js в public \ vendor \ packagename \, как показано ниже:

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

3 - запустите "npm run dev" в вашем пакете, чтобы скомпилировать ваше приложение. js в папке publi c внутри вашего пакета.

4- publi sh ваш public \ app. js файл в appserviceprovider. php вашего пакета:

$this->publishes([
                __DIR__.'/../resources/views' => resource_path('views/vendor/xoadmin'),
            ], 'views');

5 - теперь в ваших файлах просмотра ресурсов вы можете добавить файл приложения. js, как показано ниже:

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>

6 - создать команду для публикации sh файла приложения. js из ваш пакет публикует папку c в папку laravel public \ vendor \ package.

<?php

namespace Vendor\PackageName\Console;

use Illuminate\Console\Command;

class AssetsCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'packagename:assets';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Re-publish the packagename assets';

    /**
     * Execute the console command.
     *
     * @return void
     */
    public function handle()
    {
        $this->call('vendor:publish', [
            '--tag' => 'packagename-assets',
            '--force' => true,
        ]);

        $this->call('vendor:publish', [
            '--tag' => 'views',
            '--force' => true,
        ]);
    }
}

Все приведенные выше коды можно найти в Laravel Horizon Github-репозитории , Я просто объясняю, как людям легче понять.

Answer 2

Лучшей практики не существует, но если вы хотите сделать это как можно проще, вы можете сделать это следующим образом:

const components = require.context('./components', true, /\.vue$/i);
components.keys().map((key) => {
  return Vue.component(`${key.split('/').pop().split('.')[0]}-component`, components(key).default)
});

Любой файл, найденный глубоко (2-й аргумент в require.context) внутри ваш каталог components в resources/js будет автоматически добавлен как Vue component с добавлением -component в конец.

Таким образом, вы можете просто запустить vendor:publish, и ваши компоненты появятся там автоматически. Если вы используете yarn watch или yarn hot, они также будут автоматически зарегистрированы на publi sh.

Причина, по которой это работает, заключается в том, что мы говорим webpack о создании context это соответствует нашему выражению в данном каталоге. Вы можете прочитать больше о require.context здесь .