Question

我是一位经验不足的Web开发人员，尤其是JavaScript。最近，我一直在尝试解决此问题，并且由于Laravel是我选择的框架，因此我试图从以下“旧”样式中进行更改：

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

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

经过反复试验，我设法使基本设置正常工作。我有一个settings.js文件，用于在必要时更改模块的默认设置，还有一个app.js文件，用于在每个页面上提供自定义功能。我还将供应商模块分离到了vendor.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')

如何在嵌入式JavaScript上使用Webpack模块

1 个答案: