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

Question

我是一個沒有經驗的Web開發人員，尤其是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，以實現僅限於那些頁面的功能（使用非默認設置初始化選擇器，自定義表單行為等）。 因此，某些頁面在</body>之前還有一個額外的<script type="text/javascript"> [custom code] </script>部分。

但是，那里的代碼無法訪問模塊： $('.input-daterange').datepicker(); 應該將輸入初始化為bootstrap-datepicker實例，但不是這樣。 當然，使用“舊樣式”可以奏效。 現在，我收到一個TypeError: undefined is not a function (near '...$('.input-daterange').datepicker...')錯誤。

因此，我的問題是：如何導入在HTML文件中嵌入的腳本中使用的必要模塊？

PS ：當我幾乎完成這個問題的寫作時，我偶然發現了解決方案。 盡管如此，我還是決定發布它，因為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')