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

Question

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

我试过的

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

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: {
    '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”。请帮助或提出任何修改建议。

Answer 1

而不是添加 bootstrap.min.js 添加 bootstrap.bundle.min.js 到您的需求路径。

Answer 2

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

如果它不起作用，您可以使用 解决方法 ，而不是将依赖项单独添加到项目中，而是添加 bootstrap 包 直接。

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

Answer 3

我尝试包含 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;
});

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

How to add popper.js in an oracle JET project

oracle-jet

popper.js