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 * from ...函数将angular2-google-maps/core/index.ts中的__export声明编译为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 。

这是一个blog post，它完整地记录了确切的步骤。此外，还有Github repo，其中显示了功能完备的代码。

使用rollupjs导入，es2015模块

2 个答案: