时间戳

首页 > 解决方案 > 如何在内联 javascript 上使用 webpack 模块

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

问题描述

我是一个缺乏经验的 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 文件中的脚本中使用的必要模块？

PS：当我写完这个问题时，我偶然发现了解决方案。尽管如此，我还是决定发布它，因为 a) 它可能对其他人有所帮助，并且 b) 如果有更好的方法来解决这个问题，我很想听听。

标签： javascriptwebpacklaravel-mix

解决方案

不是在嵌入的 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')

推荐阅读