laravel-mix 引入第三方js

liaosp發表於2020-10-14
LaravelJS

在此之前需安裝laravel-mix

laravel-mix 為開發者提供了非常便利的功能，通過webpack把所需的功能，優雅的打包到laravel裡。

今天測試一個，如何把一個npm倉庫上的包匯入專案中去使用。

隨便找一個包：

www.npmjs.com/package/qt-dialog

根據裡面的提示

npm install qt-dialog

安裝成功後，在webpack.mix.js 匯入這個擴充。


mix.extract(['qt-dialog']);

重新啟動

npm run watch

系統會生成三個js

    app.js
    manifest.js
    vendor.js

在需要用到這個外掛的頁面引入 這三個js ，也可以裝入layout刀片中

<script src="/js/app.js"></script>
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>

這個時候 這個外掛已經匯入了應用中。

引用這個外掛：

在resources/js/app.js

import dialogs from 'qt-dialog';
window.dialog = dialogs;

在應用的頁面中，就可以呼叫這個外掛了

<script>
    /** 顯示 Dialog */
    dialog.show({
        title: '我是標題',
        content: '哈哈哈哈，我是標題',
        cancelCb: function () {
            alert('點選取消');
        },
        confirmCb: function () {
            alert('點選確定');
            dialog.hide();
        }
    });

</script>

如何配置熱更新？？

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章