如何用jQuery超薄和新的@popperjs和Laravel构建Bootstra4？

Question

webpack.mix.js含量

const mix = require('laravel-mix');

mix.js('resources/assets/js/vendor.js', 'public/js');

vendor.js含量

window.Popper = require('@popperjs/core').default;

try {
    window.$ = window.jQuery = require('jquery/dist/jquery.slim.js');

    require('bootstrap');
} catch (e) {}

在构建之后，在public/js/vendor.js文件中，我可以清楚地看到，@popperjs和jquery.slim.js包含在jquery和旧popperjs之上(它们被复制)。

我知道这是因为node_modules\bootstrap\dist\js\bootstrap.js将require('jquery'), require('popper.js')作为依赖项。

如何使用新的@popperjs 和 jquery.slim.js 构建资产，而不使用旧的 popperjs 和完整的 jquery 版本？E 232

Answer 1

它可以帮你：https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript

因此，您可以单独导入插件，并使用更新的popperjs版本。但是值得注意的是，引导4使用更新的popperjs版本可能是不稳定的。

顺便说一句：https://github.com/twbs/bootstrap/issues/29842的机会在引导5。

Answer 2

引导程序4与Popper 2 (npm@popperjs/core)不兼容，您需要使用Popper 1 (npm@popper.js)

Answer 3

参考：

我知道这是因为node_modules\bootstrap\dist\js\bootstrap.js将require('jquery')、require('popper.js')作为依赖项。

不正确。

引导程序不会为您加载jQuery或popper。无论您使用哪个包管理器，您都必须自己加载它们。

来源：https://getbootstrap.com/docs/4.0/getting-started/download/#package-managers

require('bootstrap')将把引导带的所有jQuery插件加载到jQuery对象上。

如果npm引导包在依赖项中找不到合适的jquery包版本，则只能在控制台中发出警告。

这也是相当容易测试:简单地不包括jQuery之前，需要引导，打开控制台，得到一袋爆米花，点击刷新按钮，享受节目。

要告诉webpack jquery是在window.jQuery上找到的(在您的应用程序中可能需要或导入它时)，您应该在webpack config的externals中指定它

externals: {
  jquery: 'window.jQuery'
}

这样，在您的应用程序中使用import * as $ from 'jquery'的任何地方，它实际上都会使用在完成需求/导入时的任何window.jQuery。

至于有信誉的资源，请回答“哪些是Bootstrap的依赖项？”问题是，唯一的来源是快速入门。

这里是他们在clear中指定的地方，不包括jQuery：#js-文件