Sử dụng thư viện javascript không phải npm (cũ) với Jspm

Tôi đang cố gắng tích hợp this library không phải là npm. Tôi đã thất bại nhiều lần vì tôi luôn phát triển mạnh mẽ bằng cách sử dụng một số khung công tác hiện đại khiến tôi không thể tích hợp được.Sử dụng thư viện javascript không phải npm (cũ) với Jspm

Tôi đã thử backbone.js với require.js, thậm chí là Dart và giờ tôi đang cố gắng hết sức để đạt được điều tương tự bằng cách sử dụng gulp, jspm, aurelia. Vấn đề là thư viện này có lẽ không tuân theo khái niệm mô-đun. Tôi đã có rất nhiều vấn đề với khởi tạo của lib này, đã làm rất nhiều shimming.

Vì vậy, câu hỏi là làm thế nào tôi có thể sử dụng loại thư viện như vậy. Sử dụng cùng một cách hiện đại để xây dựng các ứng dụng javascript.

Nguồn

2016-03-09 Zveratko

Sau khi xem xét các mã, tôi đã nhận nó làm việc (tôi đã sử dụng require.js, nhưng bạn có thể sử dụng bất cứ điều gì bạn thích):

// main.js 
 
//////////////// 
 
require(['mapy-loader'], function (Loader) { 
 
    // load mapy async and wait for it to finish 
 
    Loader.async = true; 
 
    Loader.load(null, null, function() { 
 
     var stred = SMap.Coords.fromWGS84(14.41, 50.08); 
 
     var mapa = new SMap(JAK.gel("mapa"), stred, 10); 
 
     mapa.addDefaultLayer(SMap.DEF_BASE).enable(); 
 
     mapa.addDefaultControls(); 
 
    }); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 
    <script data-main="main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script> 
 
    <script> 
 
     requirejs.config({ 
 
      paths: { 
 
       "mapy-loader": "//api.mapy.cz/loader" 
 
      }, 
 
      shim: { 
 
       'mapy-loader': {exports: 'Loader'} 
 
      } 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
<div id="mapa" style="width:600px; height:400px;"></div> 
 
</body> 
 
</html>

(Nó sẽ không chạy trong đoạn h ere, kể từ khi JavaScript nên được đặt trong một file có tên main.js)

EDIT:

Thêm jspm/System.js đoạn mã:
(main.js là không thay đổi)

// main.js 
 
//////////////// 
 
define(['mapy-loader'], function (Loader) { 
 
    // load it async and wait for it to finish! 
 
    Loader.async = true; 
 
    Loader.load(null, null, function() { 
 
     var stred = SMap.Coords.fromWGS84(14.41, 50.08); 
 
     var mapa = new SMap(JAK.gel("mapa"), stred, 10); 
 
     mapa.addDefaultLayer(SMap.DEF_BASE).enable(); 
 
     mapa.addDefaultControls(); 
 
    }); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="jspm_packages/system.js"></script> 
 
    <script> 
 
     System.config({ 
 
      baseURL: "/", 
 
      defaultJSExtensions: true, 
 
      transpiler: "babel", 
 
      paths: { 
 
       "mapy-loader": "//api.mapy.cz/loader" 
 
      }, 
 
      meta: { 
 
       'mapy-loader': { 
 
        format: 'global', 
 
        exports: 'Loader' 
 
       } 
 
      } 
 
     }); 
 
    </script> 
 
    <script> 
 
     System.import('main.js'); 
 
    </script> 
 
    Run 
 
</head> 
 

 
<body> 
 
<div id="mapa" style="width:600px; height:400px;"></div> 
 
</body> 
 
</html>

Nguồn

2016-04-04 23:06:52

Bạn có thể thực hiện thao tác này bằng cách sử dụng jspm không? – Zveratko

Chắc chắn, jspm chỉ sử dụng System.js để tải tài nguyên. Tôi đã cập nhật câu trả lời của mình để thêm đoạn mã. –

Đối với các thư viện cũ không tuân theo các mô-đun mô-đun hiện đại, cách tiếp cận thường là giả mạo chúng.

Nếu bạn đang sử dụng webpack, bạn có thể Shim module bằng cách tuyên bố imports and exports.
RequireJS có số shim config tương tự, nhưng cần thêm dây để khai báo phụ thuộc. Tôi rất muốn giới thiệu webpack trên Grunt/gulp/RequireJS.

Tuy nhiên, hãy xem thư viện mapy.cz bạn đã liên kết, nó tải động nhiều nội dung khác bằng cách viết thẻ tập lệnh vào trang. Tôi có thể thấy khó khăn như thế nào khi làm việc cùng.

Tôi nghĩ rằng lựa chọn của bạn là thực sự:

Nếu giấy phép là một trận giao hữu mã nguồn mở một, ngã ba nó và phơi bày nó trong một định dạng mô-đun hiện đại hơn có thể dễ dàng nhập khẩu qua NPM. Kiểm tra các UMD style - bạn có thể viết một tuyên bố sẽ xuất khẩu các mô-đun trong một định dạng có thể sử dụng bởi hầu hết các hệ thống mô-đun (AMD, CommonJS, vv). webpack library and externals page có một số hướng dẫn để viết mô-đun ở định dạng mà người khác có thể sử dụng.
Nếu đó không phải là giấy phép nguồn mở, bạn có thể liên lạc với (các) tác giả để yêu cầu họ thay đổi cách thư viện được nhóm và tải. Nó phải là một cách dễ dàng bán: một mô-đun npm sẽ cho phép nhiều người sử dụng mã của họ hơn, và sẽ dễ dàng hơn để làm việc với - đặc biệt nếu họ bắt đầu versioning nó. Bạn có thể cung cấp để làm điều đó cho họ, hoặc chỉ làm điều đó như là một ví dụ họ có thể sao chép từ.

Họ có một trang định chi tiết các điều khoản và điều kiện, cũng như 'liên hệ' nút - Tôi muốn bắt đầu ở đó: http://napoveda.seznam.cz/cz/mapy/mapy-licencni-podminky/licencni-podminky-mapovych-podkladu/

Nguồn

2016-04-03 15:28:29

Các vấn đề với porting để npm là trong khả năng javascript yếu của tôi và thời gian cần thiết cho cổng như vậy. Thuyết phục chủ sở hữu là rất không thể. – Zveratko

Sử dụng thư viện javascript không phải npm (cũ) với Jspm

Trả lời

Các vấn đề liên quan