laravel-mix 引入第三方js

在此之前需安装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 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
33
粉丝
14
喜欢
118
收藏
95
排名:360
访问:2.5 万
私信
所有博文
社区赞助商