如何在 oracle JET 项目中添加 popper.js答案

【问题标题】：How to add popper.js in an oracle JET project如何在 oracle JET 项目中添加 popper.js
【发布时间】：2020-12-18 03:23:11
【问题描述】：

我正在尝试在我使用 ojet v6 库的 OJET 项目中包含引导程序。我收到一条错误消息，提示 ojmodule 由于“需要 popper”而失败。

我的尝试

我已经在 lib 文件夹中添加了 popper.js。
我已将 lib 包含在 require.js configPath 数组内的 main.js 文件中。

requirejs.config({
  // Path mappings for the logical module names
  paths:
  //injector:mainReleasePaths
  {
    'popper' : 'libs/popper/popper.min' ,
    'bootstrap' : 'libs/bootstrap4/js/bootstrap.min',
    //other libs goes here

在 main.js 的 shim 对象中添加了“popper”引用

    shim: {
    'jquery': {
        exports: ['jQuery', '$']
    },
    'Popper' : {
        exports : ['Popper', 'popper']
        }
    }

在 ojet 模块中添加了 popper 引用。由

define(['ojs/ojcore', 'knockout', 'appController','popper','bootstrap'],
        function (oj, ko, app, popper,bootstrap) {

仍然收到错误无法加载 ojet 模块“require.js 需要popper”。请提供帮助或提出任何修改建议。

【问题讨论】：

标签： popper.js oracle-jet

【解决方案1】：

Bootstrap 4 使用 popper.js 和 jquery 作为其依赖项。它应该在引导之前加载。正如我所看到的，您已在 shim 中添加并假设 require.config 中提供的路径是正确的它应该可以工作；

如果它不起作用，您可以有一个 workaround，而不是将依赖项单独添加到项目中，而是直接添加 bootstrap bundle。

requirejs.config({
  // Path mappings for the logical module names
  paths:
  //injector:mainReleasePaths
  {
    'jquery': 'libs/jquery/jquery-3.3.1',
    'bootstrap' : 'libs/bootstrap4/js/bootstrap.bundle.min',

注意 bootstrap.bundle.min.js 包含 popper 但不包含 jquery。所以需要在 bootstrap 之前加载 jquery。

【讨论】：

谢谢@santosh。即使它的解决方法挽救了我的一天。我仍然在寻找一个真正的答案。所以保持帖子打开，而不是把它作为正确的答案。
我也在等

【解决方案2】：

我尝试包含 underscore.js 并按照以下步骤操作：

npm i underscore.js，我们可以安装任何模块，因为它运行在节点上
修改path_mapping.json:

"underscore": {
    "cdn": "3rdparty",
    "cwd": "node_modules/underscore",
    "debug": {
        "src": "underscore.js",
        "path": "libs/underscore/underscore.js",
        "cdnPath": "underscore/underscore.1.0"
    },
    "release": {
        "src": "underscore.min.js",
        "path": "libs/underscore/underscore.min.js",
        "cdnPath": "underscore/underscore.1.0"
    }
}

修改main.js

'underscore': 'libs/underscore',

在viewModels中使用：

define([
    "require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojconverterutils-i18n", "ojs/ojarraydataprovider", "ojs/ojcolor", "ojs/ojconverter-datetime", "underscore","ojs/ojknockout", "ojs/ojbutton", "ojs/ojinputtext", "ojs/ojcollapsible", "ojs/ojinputnumber", "ojs/ojradioset", "ojs/ojcheckboxset", "ojs/ojselectcombobox", "ojs/ojselectsingle", "ojs/ojdatetimepicker", "ojs/ojswitch", "ojs/ojslider", "ojs/ojcolorspectrum", "ojs/ojcolorpalette", "ojs/ojlabel", "ojs/ojformlayout", "ojs/ojlabelvalue","ojs/ojaccordion","ojs/ojactioncard"
], 
function (require, exports, ko, Bootstrap, ojconverterutils_i18n_1, ArrayDataProvider, Color, ojconverter_datetime_1,_) {
    function EmployeesViewModel() {
        _.each([1, 2, 3], console.log);
        var self=this;
        self.logMsg = ko.observable("none");
        self.actionHandler = (event) => {
            this.logMsg("Action handler invoked - " + event.currentTarget.id);
        };
    }
    return EmployeesViewModel;
});

【讨论】：

【解决方案3】：

不要添加 bootstrap.min.js，而是将 bootstrap.bundle.min.js 添加到您的要求路径中。

【讨论】：