浏览器填充码首先加载

Browserify-shim Load first

本文关键字：加载 填充 浏览器      更新时间：2023-09-26

我在浏览器化填充程序和引导日期时间选择器方面有问题。引导日期时间选择器需要时刻.js但这个插件必须首先加载，然后加载日期时间选择器。我的代码： 

"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');

但是当我使用它时，控制台抛出错误。未捕获错误：引导日期时间选取器需要先加载 Moment.js

如何先加载时刻.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();

browserify-shim 中的global标志是通过 <script></script> 标记填充全局加载的现有库，这样您就不会通过 node_modules 第二次加载它们。你不想要那个。如果它只是您node_modules的一部分，您也不需要填充moment，因此您可能可以将其删除。试试这个为您的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。

相关文章：