Laravel Composer Package 開發(fā)實戰(zhàn) toastr-for-laravel5

qpal 發(fā)布于2019-07-01 12:15 / 1149人閱讀

摘要：一般的包開發(fā)過程是這樣的，開發(fā)好以后打包到，然后在上提交下面我們就來一步一步實現(xiàn)這個過程。在新建的項目中建立如下目錄目錄和目錄同級。我們開發(fā)包的代碼都放在這個目錄中和完全自定義。

本文最早發(fā)表于本人博客: Laravel Composer Package 開發(fā)實戰(zhàn) toastr-for-laravel5

在Laravel的文檔中有Package Development，對于入門開發(fā)人員來說還是比較抽象，因為開發(fā)一個包需要了解 Service Providers,Service Providers 和 Facade 已經(jīng)夠抽象的了對剛接觸Laravel的開發(fā)人員來說，所以我來寫一個簡單的Laravel 包開發(fā)的實例教程吧。

toastr.js是一個很方便的通知效果，最近剛發(fā)布了laravel 5.2，所以就來開發(fā)一個toastr for laravel 5的包吧，主要用toastr結(jié)合laravel的flash session來實現(xiàn)頁面的一次性消息提醒，其實這個在我們?nèi)粘ｉ_發(fā)中頁面操作提醒還是很常用到的業(yè)務(wù)。

一般的laravel 包開發(fā)過程是這樣的，開發(fā)好以后打包push到gitlab，然后在packagist上提交,下面我們就來一步一步實現(xiàn)這個過程。

1.在新建的laravel項目中建立如下目錄 packages/yuansir/toastr/src ,packages 目錄和 app 目錄同級。我們開發(fā)包的代碼都放在這個src目錄中,yuansir和toastr完全自定義。

2.修改項目的composer.json,設(shè)定PSR-4命名空間:

"autoload": {
        "classmap": [
            "database"
        ],
        "psr-4": {
            "App": "app/",
            "YuansirToastr": "packages/yuansir/toastr/src/"
        }
    },

別忘了執(zhí)行autoload

$ composer dump-autoload

3.為我們的包初始化一個composer.json文件，熟悉composer的應(yīng)該都知道這玩意是干嘛的了

$ cd pacages/yuansir/toastr/src
$ composer init

按照提示填寫相關(guān)信息，有些信息可以不用填寫，后面自己在composer.json中添加就可以了，生成的示例如下：

{
    "name": "ryan/toastr-for-laravel",
    "description": "toastr.js for laravel5",
    "authors": [
        {
            "name": "Ryan",
            "email": "yuansir@live.cn"
        }
    ],
    "require": {}
}

4.開始開發(fā)，新建Service Provider

$ php artisan make:provider ToastrServiceProvider

將生成的app/Providers/ToastrServiceProvider.php文件移動到我們的packages/yuansir/toastr/src目錄下面，并注冊ToastrServiceProvider到config/app.php 的providers 中。

 "providers" => [

        /*
         * Laravel Framework Service Providers...
         */
         ......

        /*
         * Application Service Providers...
         */
         ......
        YuansirToastrToastrServiceProvider::class,
    ],

5.新建packages/yuansir/toastr/src/config/toastr.php 來保存toastr.js的options，options配置還蠻多的，具體可以看它的demo。

 []
];

關(guān)于這個配置在我們包中如何調(diào)用的，我們過會來說.

6.新建Toastr類，來實現(xiàn)toastr 的info，success，error，warning的相關(guān)實現(xiàn)，代碼還是很簡單的，packages/yuansir/toastr/src/Toastr.php:

session = $session;
        $this->config = $config;
    }

    public function render()
    {
        $notifications = $this->session->get("toastr:notifications");

        if(!$notifications) {
            return "";
        }

        foreach ($notifications as $notification) {
            $config = $this->config->get("toastr.options");
            $javascript = "";
            $options = [];
            if($config) {
                $options = array_merge($config, $notification["options"]);
            }

            if($options) {
                $javascript = "toastr.options = " . json_encode($options) . ";";
            }

            $message = str_replace(""", """, $notification["message"]);
            $title = $notification["title"] ? str_replace(""", """, $notification["title"]) : null;
            $javascript .= " toastr.{$notification["type"]}("$message","$title");";
        }

        return view("Toastr::toastr", compact("javascript"));
    }

    /**
     * Add notification
     * @param $type
     * @param $message
     * @param null $title
     * @param array $options
     * @return bool
     */
    public function add($type, $message, $title = null, $options = [])
    {
        $types = ["info", "warning", "success", "error"];
        if(!in_array($type, $types)) {
            return false;
        }

        $this->notifications[] = [
            "type" => $type,
            "title" => $title,
            "message" => $message,
            "options" => $options
        ];
        $this->session->flash("toastr:notifications", $this->notifications);
    }

    /**
     * Add info notification
     * @param $message
     * @param null $title
     * @param array $options
     */
    public function info($message, $title = null, $options = [])
    {
        $this->add("info", $message, $title, $options);
    }

    /**
     * Add warning notification
     * @param $message
     * @param null $title
     * @param array $options
     */
    public function warning($message, $title = null, $options = [])
    {
        $this->add("warning", $message, $title, $options);
    }

    /**
     * Add success notification
     * @param $message
     * @param null $title
     * @param array $options
     */
    public function success($message, $title = null, $options = [])
    {
        $this->add("success", $message, $title, $options);
    }

    /**
     * Add error notification
     * @param $message
     * @param null $title
     * @param array $options
     */
    public function error($message, $title = null, $options = [])
    {
        $this->add("error", $message, $title, $options);
    }

    /**
     * Clear notifications
     */
    public function clear()
    {
        $this->notifications = [];
    }
}

7.我們看到view(‘Toastr::toastr’, compact(‘javascript’));，那么就是需要一個視圖文件了，關(guān)于Toastr::toastr是什么鬼我們過會來說,新建 packages/yuansir/toastr/src/views/toastr.blade.php 視圖文件：

就是引入了tastr插件，輸出我們render方法中的$javascript

8.建立Facade,新建packages/yuansir/toastr/src/Facades/Toastr.php


9.修改ToastrServiceProvider：
loadViewsFrom(__DIR__ . "/views", "Toastr");

        $this->publishes([
            __DIR__."/views" => base_path("resources/views/vendor/toastr"),
            __DIR__."/config/toastr.php" => config_path("toastr.php"),
        ]);
    }

    /**
     * Register the application services.
     *
     * @return void
     */
    public function register()
    {
        $this->app["toastr"] = $this->app->share(function ($app) {
            return new Toastr($app["session"], $app["config"]);
        });
    }

    /**
     * Get the services provided by the provider.
     *
     * @return array
     */
    public function provides()
    {
        return ["toastr"];
    }
}
$this->loadViewsFrom(__DIR__ . ‘/views’, ‘Toastr’); 就是表示Toastr命名空間的視圖文件沖當(dāng)前目錄的views目錄中渲染，所以我們上面用 return view(‘Toastr::toastr’, compact(‘javascript’));
$this->publishes 在執(zhí)行php artisan vendor:publish 時會將對應(yīng)的目錄和文件復(fù)制到對應(yīng)的位置
10.測試下是否可行，修改 config/app.php 添加如下:
/*
    |--------------------------------------------------------------------------
    | Class Aliases
    |--------------------------------------------------------------------------
    |
    | This array of class aliases will be registered when this application
    | is started. However, feel free to register as many as you wish as
    | the aliases are "lazy" loaded so they don"t hinder performance.
    |
    */

    "aliases" => [
        ......

        "Toastr" => YuansirToastrFacadesToastr::class,

    ],
寫個控制器放進(jìn)去試試：

反正我測試是OK了，就不截圖了！！
11.修改命名空間到包的composer.json,因為別人安裝這個包的時候不可能也去改項目composer.json的PSR-4的autoload，所以我們把PSR-4的命名空間加到這個包的composer.json中去，修改packages/yuansir/toastr/src/composer.json 如下：
{
    "name": "ryan/toastr-for-laravel",
    "description": "toastr.js for laravel5",
    "authors": [
        {
            "name": "Ryan",
            "email": "yuansir@live.cn"
        }
    ],
    "require": {},
    "autoload": {
        "psr-4": {
            "YuansirToastr": "src/"
        }
    }
}
12.建立Github項目

將代碼push到項目中去：
$ cd packages/yuansir/toastr/
$ git init
$ git add .
$ git commit -m "add package source files."
$ git remote add origin git@github.com:yuansir/toastr-for-laravel5.git
$ git push -u origin master
$ git tag -a 1.0.0 -m "version 1.0.0"
$ git push --tags

13.提交到Packagist,打開到packagist.org,登陸后點擊右邊上角的 submit，并填入git的項目地址git@github.com:yuansir/toastr-for-laravel5.git 點擊check 就OK了


到此結(jié)束，大功告成，這樣一個Laravel 的 composer 包就開發(fā)完成了。
這個教程的源碼和這個包的安裝使用方法詳見github?https://github.com/yuansir/toastr-for-laravel5
如有問題歡迎指正！
轉(zhuǎn)載請注明：?轉(zhuǎn)載自Ryan是菜鳥 | LNMP技術(shù)棧筆記
如果覺得本篇文章對您十分有益，何不 打賞一下