Recherche de site Web

angular - Comment inclure/étendre une librairie JS avec rollup, typescript, angular2


Je travaille sur ce projet angular2-google-maps-test et je veux inclure et étendre cette librairie JS js-marker-clusterer

npm install --save js-marker-clusterer

qui ne semble pas être écrit comme un module.

function MarkerClusterer(map, opt_markers, opt_options) {
  // MarkerClusterer implements google.maps.OverlayView interface. We use the
  // extend function to extend MarkerClusterer with google.maps.OverlayView
  // because it might not always be available when the code is defined so we
  // look for it at the last possible moment. If it doesn't exist now then
  // there is no point going ahead :)
  this.extend(MarkerClusterer, google.maps.OverlayView);
  this.map_ = map;
...

}
window['MarkerClusterer'] = MarkerClusterer;

Je veux faire quelque chose comme ça :

// js-marker-clusterer.d.ts file
declare module "js-marker-clusterer" {
  export class MarkerClusterer {
    constructor(map: any, opt_markers?: any, opt_options?: any);
    map_: any;
    markers_: any[];
    clusters_: any[];
    ready_: boolean;
    addMarkers(markers: any[], opt_nodraw: boolean) : void;
    removeMarker(marker: any, opt_nodraw: boolean) : boolean;
    removeMarkers(markers: any[], opt_nodraw: boolean) : boolean;
  }
}

et ensuite étendre cette classe en TypeScript

/// <reference path="./js-marker-clusterer.d.ts" />
export class MyMarkerClusterer extends MarkerClusterer {
  constructor(map: any, opt_markers?: any, opt_options?: any) {
    super(map, opt_markers, opt_options);
  }   
}

mais dans rollupjs je continue à obtenir cette erreur :

[21:20:47]  bundle failed: 'MarkerClusterer' is not exported by node_modules/js-marker-clusterer/src/markerclusterer.js  MEM: 469.6MB
            (imported by src/angular2-marker-clusterer/my-marker-clusterer.ts). For help fixing this 
            error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

Je suppose que je dois ajouter quelque chose au fichier rollup.config.js, mais j'ai essayé de l'ajouter comme plugin et cela n'a pas fonctionné.

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [
    builtins(),
    //commonjs(),
    commonjs({
      namedExports: {
        'node_modules/angular2-google-maps/core/index.js': ['AgmCoreModule'],
        'node_modules/js-marker-clusterer/src/markerclusterer.js': ['MarkerClusterer']
      }
    }),

Réponse n°1

En fait, je ne sais pas pour la partie Typescript, mais je pense qu'au lieu du plugin commonjs, vous devriez essayer le rollup-plugin-legacy.

legacy({
    'node_modules/js-marker-clusterer/src/markerclusterer.js': 'MarkerClusterer'
})

N'oubliez pas de modifier l'instruction d'importation en conséquence.