blocks|key|795948|text|它可以帮你：https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|795949|因此，您可以单独导入插件，并使用更新的popperjs版本。但是值得注意的是，引导4使用更新的popperjs版本可能是不稳定的。|795950|顺便说一句：https://github.com/twbs/bootstrap/issues/29842的机会在引导5。|795951|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript|1|https://github.com/twbs/bootstrap/issues/29842^0|6|27|0|0|0|6|1A|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

It could help you out: <a href="https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript</a>

So you can import plugins individually and use a newer popperjs version. But count on, it might be instable for bootstrap 4 to use a newer popperjs version.

Btw: <a href="https://github.com/twbs/bootstrap/issues/29842" rel="nofollow noreferrer">https://github.com/twbs/bootstrap/issues/29842</a> chance in bootstrap 5.

blocks|key|2180088|text|引导程序4与Popper+2+(npm@popperjs/core)不兼容，您需要使用Popper+1+(npm@popper.js)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2180089|entityMap^0|G|H|1H|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Bootstrap 4 is not compatible with Popper 2 (<code>npm@popperjs/core</code>), you need to use Popper 1 (<code>npm@popper.js</code>)

blocks|key|162992|text|参考：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162993|我知道这是因为node_modules\bootstrap\dist\js\bootstrap.js将require('jquery')、require('popper.js')作为依赖项。|blockquote|offset|length|style|CODE|162994|不正确。|162995|引导程序不会为您加载jQuery或popper。无论您使用哪个包管理器，您都必须自己加载它们。|162996|来源：https://getbootstrap.com/docs/4.0/getting-started/download/#package-managers|162997|require('bootstrap')将把引导带的所有jQuery插件加载到jQuery对象上。|162998|如果npm引导包在依赖项中找不到合适的jquery包版本，则只能在控制台中发出警告。|162999|这也是相当容易测试:简单地不包括jQuery之前，需要引导，打开控制台，得到一袋爆米花，点击刷新按钮，享受节目。|163000|要告诉webpack+jquery是在window.jQuery上找到的(在您的应用程序中可能需要或导入它时)，您应该在webpack+config的externals中指定它|163001|externals:+{
++jquery:+'window.jQuery'
}|code-block|syntax|javascript|163002|这样，在您的应用程序中使用import+*+as+$+from+'jquery'的任何地方，它实际上都会使用在完成需求/导入时的任何window.jQuery。|163003|至于有信誉的资源，请回答“哪些是Bootstrap的依赖项？”问题是，唯一的来源是快速入门。|163004|这里是他们在clear中指定的地方，不包括jQuery：#js-文件|163005|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/getting-started/download/#package-managers|1|https://getbootstrap.com/docs/4.4/getting-started/introduction/#quick-start|2|https://getbootstrap.com/docs/4.4/getting-started/contents/#js-files^0|0|7|17|1F|H|1X|K|0|0|0|3|24|0|0|0|K|0|2|3|J|6|0|0|B|6|J|D|23|9|0|0|D|R|1U|D|0|15|4|1|0|S|6|2|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1K|8|@$E|1L|F|1M|G|H]|$E|1N|F|1O|G|H]|$E|1P|F|1Q|G|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|1R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1S|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1T|8|@]|9|@$E|1U|F|1V|1|1W]]|A|$]]|$1|O|3|P|5|D|7|1X|8|@$E|1Y|F|1Z|G|H]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|20|8|@$E|21|F|22|G|H]|$E|23|F|24|G|H]]|9|@]|A|$]]|$1|S|3|T|5|6|7|25|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|26|8|@$E|27|F|28|G|H]|$E|29|F|2A|G|H]|$E|2B|F|2C|G|H]]|9|@]|A|$]]|$1|W|3|X|5|Y|7|2D|8|@]|9|@]|A|$Z|10]]|$1|11|3|12|5|6|7|2E|8|@$E|2F|F|2G|G|H]|$E|2H|F|2I|G|H]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2J|8|@]|9|@$E|2K|F|2L|1|2M]]|A|$]]|$1|15|3|16|5|6|7|2N|8|@]|9|@$E|2O|F|2P|1|2Q]]|A|$]]|$1|17|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]|1F|$5|1A|1B|1C|A|$1D|1G]]|1H|$5|1A|1B|1C|A|$1D|1I]]]]

Ref: 

<blockquote>
 I know that this happens because <code>node_modules\bootstrap\dist\js\bootstrap.js</code> has <code>require('jquery')</code>, <code>require('popper.js')</code> as dependencies.
</blockquote>

Incorrect. 
Bootstrap does not load either jQuery or popper for you. You have to load them yourself, regardless of what package manager you use. 

Source: <a href="https://getbootstrap.com/docs/4.0/getting-started/download/#package-managers" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/getting-started/download/#package-managers</a>

<blockquote>
 <code>require('bootstrap')</code> will load all of Bootstrap’s jQuery plugins onto the jQuery object.
</blockquote>

All you get is a warning in console when installing the <code>npm</code> Bootstrap package if it doesn't find a suitable <code>jquery</code> package version in your dependencies.

This is also quite easy to test: simply don't include jQuery before requiring Bootstrap, open the console, get a bag of popcorn, hit refresh button and enjoy the show.

<hr>

To tell webpack <code>jquery</code> is to be found at <code>window.jQuery</code> (whenever it might be required or imported in your app), you should specify it in webpack config's <code>externals</code>:

<pre><code>externals: {
 jquery: 'window.jQuery'
}
</code></pre>

With this, anywhere in your app where you use <code>import * as $ from 'jquery'</code> it will actually use whatever <code>window.jQuery</code> is at the time the require/import is done.

<hr>

As far as reputable sources go for answering "Which are Bootstrap's dependencies?" question, the only source is <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/#quick-start" rel="nofollow noreferrer">Getting Started</a>.

And here's where they specify in clear jQuery is not included: <a href="https://getbootstrap.com/docs/4.4/getting-started/contents/#js-files" rel="nofollow noreferrer">#js-files</a>

The content of <code>webpack.mix.js</code>:

<pre><code>const mix = require('laravel-mix');

mix.js('resources/assets/js/vendor.js', 'public/js');
</code></pre>

The content of <code>vendor.js</code>:

<pre><code>window.Popper = require('@popperjs/core').default;

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

 require('bootstrap');
} catch (e) {}
</code></pre>

After the build, in the <code>public/js/vendor.js</code> file I can clearly see that <code>@popperjs</code> and <code>jquery.slim.js</code> gets included on top of <code>jquery</code> and old <code>popperjs</code> (they get duplicated).

I know that this happens because <code>node_modules\bootstrap\dist\js\bootstrap.js</code> has <code>require('jquery'), require('popper.js')</code> as dependencies. 

How can I build the assets with new <code>@popperjs</code> and <code>jquery.slim.js</code> without the old <code>popperjs</code> and full <code>jquery</code> version?

How to build Bootstrap 4 with jQuery slim and new @popperjs with Laravel-mix?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

webpack.mix.js含量const mix = require('laravel-mix');mix.js('resources/assets/js/vendor.js', 'public/js');vendor.js含量window.Popper = require('@popperjs/core').def...

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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