Angular 2 Rollup Tree Shaking неожиданный токен в RxJS lib

Обновление 22 февраля 2017 г.

Как упоминал Тоби, в последних обновлениях пакетов, похоже, есть некоторые критические изменения. Я еще не уверен, какой пакет вызывает проблему.

Текущие версии, перечисленные ниже, работают без проблем. Когда я обновляюсь до последней версии, я получаю ту же ошибку, что и вы:

"@angular/common": "2.4.7",
"@angular/compiler": "2.4.7",
"@angular/compiler-cli": "2.4.7",
"@angular/core": "2.4.7",
"@angular/forms": "2.4.7",
"@angular/http": "2.4.7",
"@angular/platform-browser": "2.4.7",
"@angular/platform-browser-dynamic": "2.4.7",
"@angular/platform-server": "2.4.7",

"rxjs": "5.1.0",
"zone.js": "0.7.6"

"gulp-typescript": "3.1.4",
"systemjs": "0.20.7",
"typescript": "2.1.6",

Общее решение

1. Используйте NGC для компиляции источника (цель es5 и модуль es6). Это создает фабрики в папке src, а метаданные и файлы .d.ts в папке dist.

   Затем создайте необходимые метаданные и файлы .d.ts, установив следующие параметры в tsconfig-aot.json:

   "compilerOptions": {
       "target": "es5",
       "module": "es6",
       "moduleResolution": "node",
       "declaration": true,
        ...
    },
   "angularCompilerOptions": {
       "genDir": "",
       "skipMetadataEmit" : false
    }
   

2. Перекомпилируйте папку src, используя tsc; встроить HTML с помощью плагина. Я использовал gulp-inline-ng2-template:

      gulp.task('compile:es6', function () {
          return gulp.src(['./src/**/*.ts'])
            .pipe(inlineNg2Template({ base: '/src' }))
            .pipe(tsc({
                "target": "es5",
                "module": "es6",
                "moduleResolution": "node",
                "experimentalDecorators": true,
                "emitDecoratorMetadata": true,
                "lib": ["es6", "dom"]
       }))
   

3. Скопируйте файлы HTML из папки src в папку dist. Эта часть необходима, потому что NGC был скомпилирован до того, как были встроены шаблоны HTML. В результате метаданные по-прежнему думают, что ваш компонент использует templateURL. Надеюсь, сообщество предложит хороший плагин для встроенного html, так что этот шаг больше не понадобится.

4. Используйте свертку, чтобы встряхнуть дерево и создать пакеты:

   gulp.task('rollup:module', function() {
     return rollup.rollup({
       entry: pkg.main,
       onwarn: function (warning) {
         // Skip certain warnings
   
         // should intercept ... but doesn't in some rollup versions
         if (warning.code === 'THIS_IS_UNDEFINED') { return; }
         // intercepts in some rollup versions
         if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
   
         if ( warning.message.indexOf("treating it as an external dependency") > -1 ) { return; }
   
         if (warning.message.indexOf("No name was provided for external module") > -1) { return; }
   
         // console.warn everything else
          console.warn(warning.message);
       }
   
    }).then( function ( bundle ) {
       bundle.write({
          dest: `dist/${pkg.name}.bundle.umd.js`,
          format: 'umd',
          exports: 'named',
          moduleName: pkg.name,
          globals: {
          }
        });
        bundle.write({
           dest: `dist/${pkg.name}.bundle.cjs.js`,
           format: 'cjs',
           exports: 'named',
           moduleName: pkg.name,
           globals: {
           }
        });
        bundle.write({
           dest: `dist/${pkg.name}.bundle.amd.js`,
           format: 'amd',
           exports: 'named',
           moduleName: pkg.name,
           globals: {
           }
           });    
          });
       });
      .pipe(gulp.dest('./dist/src'));
   });
   

Когда вы публикуете свой пакет (например, в npm), убедитесь, что вы включили файлы js, .d.ts и .metadata.js в ту же папку dist\src, и убедитесь, что у вас есть файл index.js для вашего основного пакета. точка входа.

Пакеты позволяют пользователям загружать ваш пакет с помощью любого загрузчика динамических модулей; файлы js, .d.ts. и metadata.js необходимы, чтобы сделать ваш пакет AOT-совместимым, то есть другие могут установить вашу библиотеку, а также создать статические пакеты AOT.

Надеюсь, это поможет, ура!

Демо-приложение для начинающих (пакет AOT)

Похоже, это ошибка в накопительном пакете или плагине commonjs. Я пока не нашел, с какими версиями он работает.

Вот ссылки на проблемы (github):

Накопительный пакет: https://github.com/rollup/rollup/issues/1310

плагин commonjs: https://github.com/rollup/rollup-plugin-commonjs/issues/168

Я получаю ту же ошибку с 2.4.8, но после некоторой работы с моим rollup.config.js я заставил его работать.

Посмотрите мой package.json здесь и rollup.config.js:

https://github.com/steveblue/angular2-rollup