拉拉维尔·Webpack编撰

Question

我试图在resources/assets/js/app.js中使用我的简单函数，即：

require('./partial/bootstrap');
require('./partial/bootstrap-notify');

function notifme(icon,text){
      $.notify({
       // options
       icon: 'icon',        
       message: 'text'       
     })
}

我想在我的模板中调用它：

@section('footer-scripts')
    <script type="text/javascript">
         $(document).ready(function(){
           notifme('fa fa-user-circle','Logged In');
         });        
     </script>
@endsection

但是，在用webpack编译了我的app.js之后，我的函数无法访问，因为webpack在我的app.js文件中添加了额外的内容(我只是复制编译函数的部分，因为它很长)：

   /* 9 */
  /***/ (function(module, exports, __webpack_require__) {

  __webpack_require__(10);
  __webpack_require__(35);

    function notifme(icon, text) {
        $.notify({
            // options
            icon: 'icon',
            message: 'text'
        });
}

/***/ }),

只有在没有编译的情况下，我才能将函数添加到单独的文件中。

有任何方法可以将我的函数放在我的主app.js文件中吗？

错误：

未定义的ReferenceError: HTMLDocument没有定义通知。((索引)：61)在mightThrow (app.js:4062) at process (app.js:4130)

Answer 1

将定义更改为：

window.notifme = function () {
    ...
}

编辑

因此，您的resources/assets/js/app.js文件应该如下所示：

require('./partial/bootstrap');
require('./partial/bootstrap-notify');

window.notifme = function (icon, text) {
    $.notify({
        // options
        icon: 'icon',
        message: 'text'
    })
}

希望这能有所帮助！