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

  

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

require.config({
baseUrl: '/vendors',
paths: {
'jquery': 'jquery/dist/jquery.min',
'bootstrap': 'bootstrap/dist/js/bootstrap',
'popper': 'popper.js/dist/umd/popper.min',
...
},
shim: {
'bootstrap': ['jquery']
},
map: {
'*': {
'popper.js': 'popper'
}
}
});

  

核心解决方案是:

在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. 移动Web开发与适配笔记

    项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...

  2. Maven,SVN,快捷键,数据库等

    1.Eclipse中Maven的搭建: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven 下载地址: http://maven. ...

  3. Js仿腾讯微博效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. selenium学习备忘

    在做web项目的自动化端到端测试时主要使用的是Selenium WebDriver来驱动浏览器.Selenium WebDriver的优点是支持的语言多,支持的浏览器多.主流的浏览器Chrome.Fi ...

  5. python3绘图示例6-2(基于matplotlib,绘图流程介绍及设置等)

    #!/usr/bin/env python# -*- coding:utf-8 -*- import os import numpy as npimport matplotlib as mpltfro ...

  6. Jmeter入门5 关联 响应数据传递-正则表达式提取器

    在测试过程中,遇到一个问题:用户登录成功后服务器会返回一个登录凭证,之后所有的操作都需要带上此凭证.我们怎么获取登录凭证并传递给后续的操作? Jmeter提供了正则表达式提取器,用变量提取参数,后续通 ...

  7. 微信小程序加载本地图片方法

    目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具 打开项目 步骤二:新建个文件夹(放项目的一 ...

  8. MSD_radix_sort

    一.这次是在上一次尝试基础上进行的,预期是达到上次性能的9倍. MSD的基本手法就是不断切片.每一步都是把整体数据切割成256片,如上图所示,实际情况切片未必均匀,有的slice内可能一个元素也没有. ...

  9. 45. 腾讯面试题: 使用hashmap 插入数据,怎么样依照插入数据的顺序输出数据

    题目:使用hashmap 插入数据,怎么样依照插入数据的顺序输出数据 分析: 使用hashmap插入数据,数据的顺序会改变.能够写个小程序试试. 那怎么样依照插入的顺序输出呢? 方法一: 这是我第一时 ...

  10. vue中动画的封装

    <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition:opacit ...