Angular AOT/Rollup с модулями, которые не имеют экспорта по умолчанию (например, immutable.js, moment.js)

Question

Я пытаюсь настроить свое угловое приложение, чтобы быть готовым к сборке AOT и Tree Shaking (rollup). Но у меня проблемы с использованием модулей, которые не имеют экспорта по умолчанию (immutable.js, moment.js, ...). Согласно typscript (смотрите here), можно использовать только такие модули со следующим утверждением: import x = require('x') или import * as x from 'x' Но оба утверждения вызывают проблемы во время свертывания. В некоторых случаях я получаю сообщение об ошибке при накопительном пакете: Cannot call a namespace ('x'), а в некоторых случаях я получаю сообщение об ошибке выполнения, что: x is undefined

Здесь вы найдете мой накопительный пакет-config.js и TSconfig-aot.json tsconfig-aot_rollup-config.zip

I нужен способ использовать пакеты, такие как immutable.js, moment.js во время компиляции и сворачивания AOT. Есть ли способ сделать это?

Спасибо!

Answer 1

UPDATE

Я столкнулся с проблемой с моим предыдущим ответом. Вот решение, к которому я пришел, работает как в SystemJ, так и с помощью AoT/rollup.

Мой оператор импорта выглядит следующим образом:

import * as moment from 'moment'; 
const momentJs = (moment as any).default ? (moment as any).default : moment; 

затем, в вашем коде, использовать его как это:

const startDateString = momentJs(startDate).format('YYYY-MM-DD'); 

Это связано с SystemJs и накопительного пакета с использованием двух различных методов для разрешения импорта модули, которые не имеют экспорта по умолчанию.

У меня есть два файла конфигурации TypeScript, один для systemJs и один для запуска сборки AoT.Оба из них имеют этот флаг в compilerOptions

"allowSyntheticDefaultImports": true 

---

(предыдущий ответ)

Я столкнулся с этим точным вопросом. Я был в состоянии заставить его работать со следующим:

var moment = require('moment'); //works 

в отличие от

import moment from "moment"; // won't work 

или

import moment = require('moment'); //won't work 

в моем накопительный пакет конфигурации, у меня есть:

commonjs({ 
     include: [ 
      'node_modules/rxjs/**', 
      'node_modules/moment/**', 
      'node_modules/hammerjs/**' 
     ] 
    }), 

То, что указывало мне в правильном направлении это был вопрос this SO answer.

Вышеупомянутое решение работает как с SystemJs, так и с процессом AoT/Rollup для Angular. Он чувствует себя немного взломанным, так как это не «типичный» способ ввода текста в типе, но он помог мне решить эту проблему.

Answer 2

Сверление работает только с es6. Попробуйте изменить цель в вашем TSconfig:

"target": "es6" 

Когда Накопительный завершится, вы можете скомпилировать пакет с машинописи в ES5, с опцией allowJs: верно.

p.s. require - это Webpack-way, при использовании Rollup используйте синтаксис импорта es6.

Answer 3

Я нашел, что в rollup-config.js, в кулинарной книге ts, они действительно ввели специфические rxjs в commonJs include. Если вы перейдете от включения только rxjs, он также будет обрабатывать сторонние модули.

Например, я использую angular2-материализуются, так:

commonjs({ 
    include: [ 
    'node_modules/rxjs/**', 
    'node_modules/angular2-materialize/**' 
    ], 

или просто включают в себя все (нашел его лучше, испытанные build.js, тот же размер):

commonjs({ 
    include: 'node_modules/**' 
})