Как связать / собрать файлы JavaScript, когда один файл ожидает объект глобального окна - PullRequest
Новая
       42

Как связать / собрать файлы JavaScript, когда один файл ожидает объект глобального окна

0 голосов
/ 01 мая 2018

Я написал анимацию внешнего интерфейса в javascript с логикой, разбитой на несколько файлов javscript. Я хотел бы объединить файлы на основе модулей ES6, по крайней мере, файлы, которые я написал сам.

Вот проблема: 

import { Webfont } from "webfontloader";

...

function animate(myText){
    WebFont.load({
        google: { families: ["Indie Flower"]},
        fontactive: function(familyName, fvd){ //This is called once font has been rendered in browser
            display(myText);
        },
    });
}

Я импортирую зависимые модули, однако один модуль (webfontloader) содержит объект окна. Это нормально, когда он запускается в браузере, но когда я собираю и связываю его с помощью npm и rollup.js, он выдает ошибку: 

   ReferenceError: window is not defined

Как я могу решить эту проблему, не касаясь кода "webfontloader", который является внешней библиотекой?

У меня есть хотя бы два варианта?

  • опция a) связать все мои файлы вместе, оставив внешние библиотеки внешними. В производстве они будут включены в качестве отдельных тегов сценария.
  • опция b) объединить все файлы в один файл

1 Ответ

0 голосов
/ 19 мая 2018

Установите global (https://www.npmjs.com/package/global), затем используйте rollup-plugin-inject (https://github.com/rollup/rollup-plugin-inject), чтобы указать свертке заменить использование window на global/window. 

// rollup.config.js
import inject from 'rollup-plugin-inject'
export default {
    // ...
    plugins: [
        inject({
            include: 'node_modules/webfontloader/**',
            window: 'global/window'
        })
    ]
...