Najgorszy czas na ustalenie, dlaczego minifikacja nie działa.
Wprowadziłem przez obiekt tablicy moich dostawców przed funkcją zgodnie z licznymi sugestiami w Internecie, a mimo to „Nieznany dostawca: aProvider <- a”
Regularny:
var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.
when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});
$locationProvider.html5Mode(true);
}])
Zminimalizowane:
var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
.config(['$routeProvider', '$locationProvider', function(a, b){
a.
when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});
b.html5Mode(true);
}])
Każda sugestia byłaby bardzo zobowiązana!
javascript
angularjs
minify
uglifyjs
BPWDevelopment
źródło
źródło
]
? (przed zamknięciem)
)Odpowiedzi:
Napotkałem ten problem już wcześniej z wtyczką Grunt.js Uglify .
Jedną z opcji jest maglowanie
uglify: { options: { mangle: false },
Uważam, że uruchamia funkcje regex na „podobnych ciągach znaków” i je minimalizuje.
Na przykład:
angular.module("imgur", ["imgur.global","imgur.album"]);
Stanie się:
angular.module("a", ["a.global","a.album"]);
Wyłącz to --- ta funkcja nie działa dobrze w Angular.
Edytować:
Mówiąc dokładniej, jak wyjaśnia @JoshDavidMiller:
Uglifikuj
mangle
tylko zmienne podobne do zmiennych, co w rzeczywistości powoduje problem AngularJS. Czyli problem tkwi we wtrysku a nie definicji.function MyCtrl($scope, myService)
zostałby zniekształconyfunction MyCtrl(a, b)
, ale definicja usługi wewnątrz łańcucha nigdy nie powinna zostać zmieniona.ng-min
przed uruchomieniemuglify
rozwiązuje ten problem.źródło
dist
kompilację, która miałaby wspomniany błąd zależności „Nieznany dostawca”. Ustawieniemangle: false
rozwiązało problem. (uwaga: problem był tylko problem wgrunt
wybudowanymdist
a nie dewelopera przyjazneapp
kompilacji)mangle: true
naprawdę manipuluje „jak struny”? Jestem prawie pewien, że zmienia się tylko jak zmienne , co w rzeczywistości powoduje problem z AngularJS. Czyli problem tkwi we wtrysku a nie definicji.function MyCtrl($scope, myService)
zostałby zniekształconyfunction MyCtrl(a, b)
, ale definicja usługi wewnątrz łańcucha nigdy nie powinna zostać zmieniona. Bieganieng-min
przed uruchomieniemuglify
rozwiązuje ten problem, prawda?ng-min
jest teraz przestarzały ing-annotate
Problem
Od AngularJS: Złe części :
Rozwiązanie
Możesz użyć
ng-annotate
do automatycznego dodawania adnotacji wymaganych do minifikacji:ng-annotate
jest szybszy i stabilniejszy niżngmin
(który jest obecnie przestarzały) i ma wtyczki dla wielu narzędzi:grunt-ng-annotate
gulp-ng-annotate
browserify-annotate
Począwszy od AngularJS 1.3 jest również nowy parametr o
ngApp
nazwiengStrictDi
:źródło
ngStrictDi
(coś w rodzaju<div ng-app="myApp" ng-strict-di />
) i używanie gogulp-ng-annotate
nawet w swoim środowisku programistycznym, aby łatwo wyśledzić te błędy minifikacji.Mam ten sam błąd. Jednak dla mnie problemem jest deklaracja kontrolera w dyrektywach. Zamiast tego powinieneś to zrobić.
myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { templateUrl: 'directive.html', replace: false, restrict: 'A', controller: ["$scope", "$element", "$attrs", "$transclude", "otherInjectables", function($scope, $element, $attrs, $transclude, otherInjectables) { ... }] }; return directiveDefinitionObject; });
https://github.com/angular/angular.js/pull/3125
źródło
controller: function ($scope) {}
notacji.mangle: false
sugerowane w innych odpowiedziach, ponieważ nadal chcemy mieć możliwość modyfikowania nazw.Miałem podobny problem, używając grunt, ngmin i uglify.
Uruchomiłem proces w następującej kolejności: concat, ngmin, uglify
Ciągle otrzymywałem błąd $ wtryskiwacza z kątowego, dopóki nie dodałem w opcji uglify mangle: false - wtedy wszystko zostało naprawione.
Próbowałem też dodać wyjątki, aby uglifikować w ten sposób:
options: { mangle: { except: ['jQuery', 'angular'] } }
Ale bez skutku...
Oto mój gruntFile.js dla dalszych wyjaśnień:
module.exports = function(grunt) { 'use strict'; // Configuration goes here grunt.initConfig({ pkg: require('./package.json'), watch: { files: ['scripts/**/*.js', 'test/**/*spec.js', 'GruntFile.js'], tasks: ['test', 'ngmin'] }, jasmine : { // Your project's source files src : ['bower_components/angular/angular.js', 'bower_components/angular-mocks/angular-mocks.js', 'scripts/app.js', 'scripts/**/*.js' ], // Your Jasmine spec files options : { specs : 'test/**/*spec.js', helpers: 'test/lib/*.js' } }, concat: { dist : { src: ['scripts/app.js', 'scripts/**/*.js'], dest: 'production/js/concat.js' } }, ngmin: { angular: { src : ['production/js/concat.js'], dest : 'production/js/ngmin.js' } }, uglify : { options: { report: 'min', mangle: false }, my_target : { files : { 'production/app/app.min.js' : ['production/js/ngmin.js'] } } }, docular : { groups: [], showDocularDocs: false, showAngularDocs: false } }); // Load plugins here grunt.loadNpmTasks('grunt-ngmin'); grunt.loadNpmTasks('grunt-docular'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jasmine'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-connect'); // Define your tasks here grunt.registerTask('test', ['jasmine']); grunt.registerTask('build', ['concat', 'ngmin', 'uglify']); grunt.registerTask('default', ['test', 'build', 'watch']);
};
źródło
Sugestia AndrewM96
ng-min
jest słuszna.Wyrównanie i biała przestrzeń mają znaczenie zarówno dla Uglify, jak i dla Angulara.
źródło
uglify
. W naszym procesie budowania używamy obu (ng-min
wcześniejuglify
) i nadal mieliśmy problem z uglified js.Miałem podobny problem. I rozwiązałem to w następujący sposób. Musimy uruchomić moduł Gulp o nazwie gulp-ng-annotate, zanim uruchomimy uglify. Więc instalujemy ten moduł
Następnie wykonaj żądanie w Gulpfile.js
ngannotate = require(‘gulp-ng-annotate’)
I w swoim zadaniu roboczym zrób coś takiego
To mnie rozwiązało.
[EDYCJA: poprawione literówki]
źródło
mg-annotate
jest zawszeng-annotate
Uglify ma opcję wyłączenia manipulacji na określonych plikach:
options: { mangle: { except: ['jQuery', 'angular'] } }
https://github.com/gruntjs/grunt-contrib-uglify#reserved-identifiers
źródło
Jest to bardzo trudne do debugowania, ponieważ wiele usług ma takie same nazwy (głównie e lub a). To nie rozwiąże problemu, ale dostarczy Ci nazwę nierozwiązanej usługi, która pozwoli Ci wyśledzić, w zniekształconych wynikach, lokalizację w kodzie i ostatecznie umożliwi rozwiązanie problemu:
Przejdź do
lib/scope.js
Uglify2 (node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/scope.js
) i zastąp wierszthis.mangled_name = this.scope.next_mangled(options);
z
this.mangled_name = this.name + "__debugging_" + counter++
źródło