импорт с помощью модулей rollupjs, es2015

#javascript #angular #ecmascript-6 #ionic2 #rollupjs

#javascript #угловой #ecmascript-6 #ionic2 #rollupjs

Вопрос:

Я использую rollupjs как часть новой ionic2@RC.0 версии. В проекте используется tsconfig.json with compilerOptions.module = "es2015" вместо "commonjs" , и это совершенно ново для меня.

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

Я получаю эту import ошибку из rollup

 [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

что мне делать?

1. Как вы импортируете директивы? Для меня работает простое добавление «AgmCoreModule.forRoot()» в imports[] в аннотации NgModule (мне также нужно импортировать «angular2-google-maps / core / core-modules»).

2. это то, что я сделал, но мне пришлось добавить imports[AgmCoreModule.forRoot()] как для shared.modules.ts app.modules.ts

3. Да, конечно. Это в начале angular2-google-maps

Ответ №1:

Когда export * from ... объявления в angular2-google-maps/core/index.ts компилируются в JS с помощью __export функции, Rollup теряет способность отслеживать, какие привязки экспортируются. Если вместо этого вы используете версию библиотеки ES6, доступную в esm/ каталоге (ECMAScript modules), все должно работать.

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

1. Я все еще получаю эти ошибки error TS2307: Cannot find module 'angular2-google-maps/esm/core/index.js'. или error TS2307: Cannot find module '../../node_nodules/angular2-google-maps/esm/core/index.js'. TS не жаловался на это: import { AgmCoreModule } from 'angular2-google-maps/core/core-modules';

Ответ №2:

Для кандидата на выпуск Ionic 2 перешел от процесса сборки на основе gulp к тому, который теперь использует rollup.js для комплектации. В большинстве случаев сторонние библиотеки «просто работают» — однако в некоторых случаях (в зависимости от того, как библиотека экспортировала свои компоненты) вам необходимо явно указать rollup.js что экспортируется. Это то, что происходит здесь с Angular 2 Google Maps.

Это задокументировано в разделе «Сборка» на странице документации по сценариям сборки приложений Ionic 2. Короче говоря, вам нужно создать пользовательский rollup.config.js файл для вашего проекта , о котором вы можете рассказать Rollup AgmCoreModule .

Вот сообщение в блоге, в котором полностью описаны точные шаги. Кроме того, вот репозиторий Github, который показывает полностью функционирующий код.