1. Uncaught Error: Script error for "popper.js", needed by: bootstrap
  2. https://requirejs.org/docs/errors.html#scripterror
  3. at makeError (require.js:168)
  4. at HTMLScriptElement.onScriptError (require.js:1738)

  

使用require.js 模块化开发引入bootstrap 4.1.1 时会报错,如上,在网上找到一个解决办法,在配置require.js 时添加map参数,最终解决方案如下:

  1. require.config({
  2. baseUrl: '/vendors',
  3. paths: {
  4. 'jquery': 'jquery/dist/jquery.min',
  5. 'bootstrap': 'bootstrap/dist/js/bootstrap',
  6. 'popper': 'popper.js/dist/umd/popper.min',
  7. ...
  8. },
  9. shim: {
  10. 'bootstrap': ['jquery']
  11. },
  12. map: {
  13. '*': {
  14. 'popper.js': 'popper'
  15. }
  16. }
  17. });

  

核心解决方案是:

在require的配置中 map 里加配置 'popper.js': 'popper'。

这是因为在Bootstrap里定义的是require('popper.js'), 而不是require标准的require('popper'), 所以要在map里做一个转换以让require.js识别。

以后遇到同类情况也可以用些方案解决。

参考:https://my.oschina.net/justplay/blog/2992283

Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js的更多相关文章

  1. [转]js模块化——AMD及require.js

    由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definitio ...

  2. 分页器的js实现代码 bootstrap Paginator.js

    参考: http://www.jb51.net/article/76093.htm 如前所述, 不要什么都想到 jquery的 脚本js, 应该首先推荐的是 css 和 元素本身的事件 函数 如: o ...

  3. js模块化开发——require.js的用法详细介绍(含jsonp)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...

  4. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  5. require.js实践

    ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...

  6. js模块化开发——require.js学习总结

    1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...

  7. require.js详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...

  8. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  9. require.js使用教程

    require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs.cn/ github : https://github.com/requirejs/ ...

随机推荐

  1. golang精华资源

    转载自:http://blog.csdn.net/songbohr/article/details/13292261 1.Learning Go <学习Go语言> http://www.m ...

  2. SpringBoot JPA注解详解

    1.@OneToOne 2.@OneToManytargetEntity: 默认关联的实体类型.如果集合类中指定了具体类型了,不需要使用targetEntity.否则需要targetEntity指定C ...

  3. css画扇形按钮

    最近项目中需要制作一个扇形按钮,效果是这样的: 周围四个扇形,和中间的小圆,全是能点击的.这就需要画扇形.百度了一下,有很多文章讲了如何生成扇形,最后我借鉴了一个最简单的实现方式,使用css的clip ...

  4. jQuery的定时执行和延迟执行

    jQuery的定时执行和延迟执行 //延迟执行 setTimeout(function(){ console.log("实战授课,100%就业"); },600); //定时执行 ...

  5. 4.JavaScript

    1.简介 JavaScript 是一种轻量级的编程语言,是一种动态类型.弱类型.基于原型的脚本语言. JavaScript,通常缩写为JS,是一种高级的,解释执行的编程语言.JavaScript是一门 ...

  6. LotusScript_批量更改数据库标识符(id)

    OA开发中经常要搭建测试环境,测试环境的数据库与原数据库不能有ID冲突现象,以防混淆.以下是一个批量修改数据库标识符的方法,其中,取得这些需要更改的数据库,需要导出源服务器上的数据库路径和名称,方法详 ...

  7. 【起航计划 024】2015 起航计划 Android APIDemo的魔鬼步伐 23 App->Notification->IncomingMessage 状态栏通知

    应用程序可以使用Notifications来通知用户某个事件发生了(如收到短信).类NotificationManager 用来处理Notification, NotificationManager可 ...

  8. 老笔记本装xubuntu+win7

    https://www.freezhongzi.info/?p=167 1 install xubuntu 分区如下 sda1 20g ext4 / sda2 80g ext4 /data sda3 ...

  9. 分享一个JDK1.8丢失数字精度的案例

    差异出现在 DigitList.java的 round() 方法处理上: 1.6: 1.8: 根据设置规则消除无需显示的数字时,JDK1.8 新增了一个二进制数向ASCII码转换的过程如下: 从而导致 ...

  10. 如何利用PHP语言压缩图片?PHP入门教程

    PHP可以控制缩略图清晰度和缩略图之后产生音量的产生.下面我们就来看看如何使用PHP优化我们的压缩图像.  PHP应用程序的开发往往涉及生成缩略图,使用PHP生成缩略图的过程本身并不难,但你知道PHP ...