使用 rollupjs、es2015 模塊導入

Question

我正在使用rollupjs作為新的ionic2@RC.0版本的一部分。 該項目使用tsconfig.json和compilerOptions.module = "es2015"而不是"commonjs" ，這對我來說是全新的。

// typescript
import { AgmCoreModule } from 'angular2-google-maps/core';

我從匯總中收到此import錯誤

[17:40:45]  typescript compiler finished in 8.08 s
[17:40:45]  bundle dev started ...
[17:40:55]  Error: Module .../node_modules/angular2-google-maps/core/index.js does not export AgmCoreModule (imported by .../.tmp/shared/shared.module.js)
    at Module.trace (.../node_modules/rollup/dist/rollup.js:7677:29)
    at ModuleScope.findDeclaration 
    ...

導入文件看起來像這樣

// index.d.ts
/**
 * angular2-google-maps - Angular 2 components for Google Maps
 * @version v0.14.0
 * @link https://github.com/SebastianM/angular2-google-maps#readme
 * @license MIT
 */
export * from './directives';
export * from './services';
export * from './map-types';
export { LatLngBounds, LatLng, LatLngLiteral, MapTypeStyle } from './services/google-maps-types';
export * from './core-module';


// index.js
/**
 * angular2-google-maps - Angular 2 components for Google Maps
 * @version v0.14.0
 * @link https://github.com/SebastianM/angular2-google-maps#readme
 * @license MIT
 */
"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
// main modules
__export(require('./directives'));
__export(require('./services'));
// Google Maps types
// core module
__export(require('./core-module'));

//# sourceMappingURL=index.js.map

我可以將導入更改為

import { AgmCoreModule } from 'angular2-google-maps/core/core-modules';

並且rollup沒有抱怨，但是angular2沒有找到從angular2-google-maps/core導入的指令

我該怎么辦？

Answer 1

當使用__export函數angular2-google-maps/core/index.ts的export * from ...聲明編譯為 JS 時，Rollup 失去了跟蹤導出綁定的能力。 如果您改為使用esm/ （ECMAScript 模塊）目錄中可用的庫的 ES6 版本，一切都應該可以工作。

import { AgmCoreModule } from 'angular2-google-maps/esm/core/index.js';

Answer 2

對於 Release Candidate，Ionic 2 從基於 gulp 的構建過程轉變為現在使用 rollup.js 進行捆綁的構建過程。 大多數時候第三方庫“正常工作”——但是在某些情況下（取決於庫導出其組件的方式），您需要明確告訴 rollup.js 導出的內容。 這就是 Angular 2 Google Maps 正在發生的事情。

這記錄在 Ionic 2 App Build Scripts文檔頁面的“Building”部分。 簡而言之，你需要為你的項目創建一個自定義的 rollup.config.js 文件來告訴 Rollup 關於AgmCoreModule 。

這是一篇完整記錄確切步驟的博客文章。 此外，這是一個Github 存儲庫，其中顯示了功能齊全的代碼。