如何在内联javascript上使用webpack模块

Question

我是一个没有经验的网络开发人员，特别是在JavaScript方面。最近我一直试图解决这个问题，而且由于Laravel是我选择的框架，我试图改变以下的“旧”风格：

<script src="script1.js"></script>
<script src="script2.js"></script>
…

更好的事情。使用Laravel，逻辑步骤是使用依赖Webpack的Mix。

经过大量的反复试验，我已经设法使基本设置正常工作。我有一个settings.js文件，用于在必要时更改模块的默认设置，以及一个app.js文件，用于我希望在每个页面上提供的自定义函数。我也将供应商模块分离到vendors.js文件。

所以bootstrap.js文件有：

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
[...]
require('bootstrap-datepicker');
require('bootstrap-year-calendar');

webpack.mix.js文件具有：

mix.autoload({ jquery: ['$', 'jQuery', 'window.jQuery']});
mix.webpackConfig({ resolve: { alias: { jquery: "jquery/src/jquery" }}});
mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')
    .extract([
        'lodash',
        'jquery',
        […]
        'bootstrap-datepicker',
        'bootstrap-year-calendar'
    ]);

主布局在`之前有以下脚本：

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

这个设置似乎有效，但最后一个问题我似乎无法弄清楚。我还在特定页面上添加了一些javascript，仅限于那些页面的功能（使用非默认设置初始化选择器，自定义表单行为等）。所以有些页面在<script type="text/javascript"> [custom code] </script>之前有一个额外的</body>部分。

但是，那里的代码无法访问模块：$('.input-daterange').datepicker();应该将输入初始化为bootstrap-datepicker实例，但事实并非如此。当然，使用“旧式”它起作用。现在，我得到一个TypeError: undefined is not a function (near '...$('.input-daterange').datepicker...')错误。

所以我的问题如下：如何导入要在HTML文件中嵌入的脚本中使用的必要模块？

P.S。：当我写完这个问题时，我偶然发现了解决方案。我决定发布它，因为a）它可能会帮助别人，而b）如果有更好的方法来解决这个问题，我很乐意听到它。

Answer 1

不是在嵌入式javascript上导入，而是在我的app.js或settings.js文件上进行导入，使其工作：

import 'bootstrap-datepicker';
import 'bootstrap-year-calendar';

但是，在settings.js而不是app.js上进行导入似乎会导致一些问题，因为它打破了一些单独的功能。我不确定是不是因为app.js在webpack.mix.js文件中首先列出（如下所示），但是你进行导入的文件确实很重要。

mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')