berhati-hati! Perangkap penggabungan dan pemampatan fail menggunakan AngularJS digabungkan dengan kemahiran RequireJS_javascript

Rangka kerja AngularJS telah digunakan dalam projek dan RequireJS digunakan untuk pemuatan modul tak segerak (AMD) Semasa melakukan penggabungan dan pemampatan fail, saya menghadapi beberapa masalah yang telah diselesaikan, tetapi saya tidak memahami sebabnya.

Lubang-lubang itu
1. Laluan dalam build.js mesti konsisten dengan laluan dalam main.js.

Build.js ini ialah fail konfigurasi yang digunakan oleh r.js dan main.js ialah fail utama RequireJS. Apabila menggabungkan dan memampatkan, laluan juga perlu ditulis dalam fail build.js, dan ia masih sama seperti main.js keperluan untuk menyalin laluan semasa menggabungkan (saya cuba bahawa tiada laluan dalam build.js dan ia tidak boleh digabungkan). (-_-!!!)

2. Sesetengah perpustakaan bergantung perlu menulis keseluruhan laluan relatif sebelum digabungkan.

Dalam projek, saya menggunakan perpustakaan pihak ketiga yang dipanggil lapisan (pustaka ditulis dengan requireJS define Apabila saya hanya melakukan pembangunan pada mulanya, selepas mengkonfigurasi laluan dalam laluan, saya hanya perlu menggunakan singkatan). (define) untuk menggunakan pustaka ini. Tetapi apabila melakukan penggabungan, ia digesa bahawa fail itu tidak wujud (kerana singkatan itu digunakan secara langsung untuk mengeja alamat fail, saya hanya boleh mengubah suai penggunaan perpustakaan ini keseluruhan laluan relatif Pada masa ini, saya membangunkan Tidak salah dengan penggabungan.

3. Ia boleh dijalankan selepas digabungkan, tetapi tidak selepas pemampatan.

Ini adalah masalah yang paling serius, masalah yang paling serius, masalah yang paling serius. Selepas fail digabungkan dan dimampatkan, AngularJS berjalan secara tidak normal apabila menggunakan fail dan sentiasa melaporkan kegagalan pemulaan modul, Gagal membuat instantiate modul biasa disebabkan oleh: Ralat: [$injector:unpr] Pembekal tidak diketahui: e , seperti yang ditunjukkan di bawah.

Perkara yang sangat penting ialah ia boleh digunakan tanpa pemampatan Setelah dimampatkan (mampatan lalai digunakan), ralat akan dilaporkan apabila digunakan. Jadi saya fikir sesuatu mesti "dihancurkan". Sesetengah artikel di Internet mengatakan bahawa anda perlu menulis cntroller AngularJS, arahan, dll. seperti berikut, dan perkhidmatan yang digunakan ditakrifkan dalam rentetan.

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

Tetapi keseluruhan aplikasi saya ditakrifkan dengan cara ini, dan tiada peluang untuk menyuntik ralat ke dalamnya. Akhirnya, saya tidak mempunyai pilihan selain mengkonfigurasi mangle: false tanpa mengelirukan nama pembolehubah Selepas melakukan ini, fail yang digabungkan dan dimampatkan boleh digunakan dengan betul! ! !

PS: Secara ringkasnya, penggabungan dan pemampatan boleh dilakukan, tetapi nama yang berubah-ubah tidak boleh dikelirukan (selalunya saya rasa masalah itu tiada penyelesaian buat masa ini).

4. Lapisan kedua keperluan tidak boleh digabungkan apabila menggabungkannya.

Sebagai contoh, jika anda memuatkan modul seperti ini dalam main.js, anda akan mendapati bahawa lapisan kedua keperluan belum digabungkan semasa penggabungan.

require([ "COMMON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

Pada masa ini, anda perlu menambah findNestedDependencies: true kepada build.js, dan kemudian lapisan kedua akan digabungkan.

Persediaan gabungan

1. Pasang nodej

Penggabungan dan pemampatan fail adalah berdasarkan nodejs, jadi pasangkan nodejs dahulu.

2. Muat turun r.js

r.js bekerjasama dengan kaedah penulisan modul requirejs untuk menggabungkan dan memampatkan fail.

Konfigurasi mudah

Adalah yang terbaik untuk menulis build.js untuk fail konfigurasi, seperti berikut:

({
  baseUrl:"../",
  paths: {
   //...
  },
  shim: {
   //...
  },
  optimize: "uglify2",
  uglify2: {
  mangle: false //false 不混淆变量名
  },
  findNestedDependencies: true,
  name: "js/main",
  out: "../js/main-built.js"
})

Berikut ialah beberapa atribut utama:

baseUrl: Semua modul (biasanya js) wujud relatif kepada laluan ini.

optimumkan: Cara mengoptimumkan fail skrip Terdapat lima kaedah nilai di bawah.

• uglify: (Lalai) Dimampatkan dengan UglifyJS.
  
• uglify2: Dimampatkan dengan UglifyJS2 (2.1.2).
  
• penutupan: Gunakan mod pengoptimuman mudah Pengkompil Penutupan Google untuk memampatkan fail, hanya sah apabila alat pengoptimuman menggunakan Java.
  
• closure.keepLines: Sama seperti parameter penutupan, kecuali baris baharu dikekalkan.
  
• tiada: Tiada pemampatan.

findNestedDependencies: Cari dependensi yang dipanggil memerlukan atau takrifkan dalam require().

PS: Terdapat banyak lagi atribut konfigurasi, jadi saya tidak akan menerangkan secara terperinci. Apabila fail dikonfigurasikan, laksanakan arahan untuk menggabungkan dan memampatkan

node r.js -o build.js

Ringkasan

Penggabungan dan pemampatan modul RequireJS agak mudah, tetapi apabila ia datang kepada AngularJS, terdapat beberapa masalah dengan pemampatan, dan tiada cara yang lebih baik ditemui setakat ini.

Di atas adalah kandungan terperinci artikel ini, saya harap ia akan membantu kajian semua orang.