Browserify / Browserify-shim with angular-ui-sortable library

时间:2017-12-21 20:10:39

标签: jquery angularjs jquery-ui browserify browserify-shim

我目前正在更新现有的AngularJS应用程序以合并browserify。我的应用目前使用项目中的angular-uiangular-ui-sortable模块,如下所示:

import "babel-polyfill";
import $ from 'jquery';
import angular from 'angular';

import { RouteConfig, RouteChangeSuccess } from './config/route.config';
import constants from './constants';
import 'angular-route';
import 'angular-sanitize';
import 'angular-animate';
import 'angular-filter';
import 'angular-ui-bootstrap';
import 'angular-ui-sortable';
import 'angular-object-diff';
import 'angular-clipboard';

import './templates';
import './filters';
import './controllers';
import './services';
import './directives';

angular.module('app', [
  'ngRoute',
  'ngSanitize',
  'ngAnimate',
  'angular.filter',
  'ui.bootstrap',
  'ui.sortable',
  'ds.objectDiff',
  'angular-clipboard',
  'app.templates',
  'app.filters',
  'app.controllers',
  'app.services',
  'app.directives'
]);

angular.module('app').constant('AppSettings', constants);
angular.module('app').config(RouteConfig);
angular.module('app').run(RouteChangeSuccess);
angular.bootstrap(document, ['app'], {
  strictDi: true
});

我目前使用gulp与browserify分别捆绑我的供应商文件和应用程序文件。

在提供应用程序时,我在浏览器控制台上遇到错误消息:

Error: 'ui.sortable: jQuery should be included before AngularJS!'

我做了一些研究,发现使用browserify-shim可以解决这个问题。我试图将我的发现应用到我的package.json并且做到了这一点:

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "angular-animate": "./node_modules/angular-animate/angular-animate.js",
    "angular-ui-bootstrap": "./node_modules/angular-ui-bootstrap/index.js",
    "angular-ui-sortable": "./node_modules/angular-ui-bootstrap/dist/sortable.js",
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      "browserify-ngannotate",
      "bulkify",
      "deamdify",
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "angular": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "angular-animate": {
      "depends": [
        "angular"
      ]
    },
    "angular-ui-sortable": {
      "depends": [
        "jquery:jQuery",
        "angular"
      ]
    },
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "angular-ui-bootstrap": {
      "depends": [
        "angular",
        "bootstrap"
      ]
    }
  }

仍无济于事,错误仍然存​​在。

我的依赖项中是否有一些明显缺失的东西?

我知道我可以使用另一个拖放库,但我宁愿尝试解决这个问题。

非常感谢您提供的任何帮助。

0 个答案:

没有答案