javascript - Browserify-shim 首先加载

Question

我在 browserify-shim 和 bootstrap-datetimepicker 方面遇到问题。 Bootstrap-datetimepicker 需要 moment.js 但必须先加载此插件，然后再加载 datetimepicker。我的代码:

"browser": {
            "moment": "./moment.js",
            "datetimepicker": "./eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
        }, 
"browserify-shim": {
        "jquery": {
            "exports": "jQuery"
        },
        "moment": "global:moment",
        "datetimepicker": {
            "depends": [
                "jquery",
                "moment"
            ]
        }
}

那我只需要它。

require('jquery');
require('moment');
require('bootstrap-datepicker');

但是当我使用它时控制台会抛出错误。 未捕获错误:bootstrap-datetimepicker 需要先加载 Moment.js

如何首先加载 Moment.js？

谢谢! :)

<小时/>

package.json

{
  "name": "Mikos",
  "version": "1.0.0",
  "description": "Mikos front-end",
  "main": "index.js",
  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-datepicker": "^1.6.0",
    "browserify": "^13.0.0",
    "eonasdan-bootstrap-datetimepicker": "^4.15.35",
    "fs": "0.0.2",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-if": "^2.0.0",
    "gulp-imagemin": "^2.4.0",
    "gulp-less": "^3.0.5",
    "gulp-minify": "0.0.5",
    "gulp-minify-css": "^1.2.3",
    "gulp-rev-all": "^0.8.22",
    "gulp-uglify": "^1.5.1",
    "i18n": "^0.8.1",
    "jquery": "^2.2.1",
    "jquery-autosize": "^1.18.18",
    "jquery-slimscroll": "^1.3.6",
    "jquery-ui": "^1.10.5",
    "mkdirp": "^0.5.1",
    "moment": "^2.12.0",
    "select2": "^4.0.2",
    "slick-carousel": "^1.5.9",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "browserify-shim": "^3.8.12",
    "del": "^2.2.0",
    "i": "^0.3.4",
    "imagemin-pngquant": "^4.2.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mikos",
  "license": "ISC",
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "slick": "slick-carousel",
    "nette-ajax": "./js_modules/nette-ajax/nette.ajax.js",
    "nette-ajax-history": "./js_modules/nette-ajax-history/client-side/history.ajax.js",
    "image": "./js_modules/image-qest/image.js",
    "datetimepicker": "eonasdan-bootstrap-datetimepicker"
  },
  "browserify-shim": {
    "datetimepicker": {
      "depends": [
        "jquery: jQuery",
        "moment: moment",
        "bootstrap: bootstrap"
      ]
    },
    "nette-ajax-history": {
      "depends": [
        "jquery"
      ]
    },
    "nette-ajax": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "bootstrap": {
      "depends": [
        "jquery"
      ]
    },
    "slick": {
      "depends": [
        "jquery"
      ]
    }
  }
}

我是这样调用它的:

app.main.js

$ = jQuery = require('jquery');
require('bootstrap');

require('nette-ajax');
require('nette-ajax-history');

require('moment');
//require('bootstrap-datepicker');
require('datetimepicker');

require('jquery-ui');
require('slick');
require('select2');

require('./init.js');
require('./menu.js');


/*$(".datepicker").datepicker({
    language: 'cs'
});*/

$('.datetimepicker').datetimepicker();

Answer 1

global browserify-shim 中的标志是填充通过 <script></script> 全局加载的现有库。标签，这样您就不会通过 node_modules 再次加载它们。你不想要这样。您也不需要垫片 moment如果它只是您的node_modules的一部分，那么您可以将其删除。为您尝试此 package.json :

"browser": {
    "moment": "./moment.js", // Make sure this is the correct path. Not necessary if it's just loaded via npm install.
    "datetimepicker": "./eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
    "bootstrap": "./path/to/your/bootstrap.js" // Only needed if bootstrap isn't loaded via npm, e.g., if it's a bower component.
}, 
"browserify-shim": {
    "jquery": "$",
    "bootstrap": {
        "depends": [
            "jquery: jQuery"
        ]
    },
    "datetimepicker": {
        "depends": [
            "jquery: jQuery",
            "moment: moment",
            "bootstrap: bootstrap" // Also required by your lib.
        ],
        "exports": "$.fn.datetimepicker" // Because this is a jQuery plugin with $.datetimepicker() function.
    }
}

您应该通过 require('datetimepicker'); 要求您的日期时间选择器根据您的package.json .