WebPack: реализовать zeptojs в сборку

Question

Я пытаюсь добавить ZeptoJS в мой WebPack пачку поставщика, но я получаю сообщение об ошибке с указанием:

"Uncaught TypeError: Cannot read property 'createElement' of undefined(…)

Я проверил zepto.js исходники, и он жалуется на этой линии :

table = document.createElement('table') <-- 'document' is undefined 

Вот отрывок из моей WebPack конфигурации:

...

config.entry.vendor = ['zepto'] 

config.module.loaders.push({ 
    test: require.resolve('zepto/dist/zepto.min.js'), 
    loader: 'exports?window.$!script' 
}); 

config.plugins.push(new webpack.ProvidePlugin({ 
    $: 'zepto' 
})); 

Продукт vendor.js загружается на загрузку EVENT.

Неужели кто-нибудь сталкивается с этой проблемой раньше и предлагает предложения о том, как я могу заставить это работать? Спасибо.

Answer 1

Перед использованием любой файл (ы), которые используют ZeptoJS должны иметь строку, которая выглядит следующим образом:

// ES6 module syntax 
import $ from 'webpack-zepto'; 

$.zeptoMethod(); 

или это:

// ES6 module syntax with direct reference to ZeptoJS file 
import 'path/to/zepto.min.js' as $; 

$.zeptoMethod(); 

Он также может выглядеть следующим образом:

// AMD module syntax 
require(['zepto'], function ($) { 
    $.zeptoMethod() 
}); 

Когда webpack видит код, как указано выше, он знает, что должен добавить zepto.js в комплект.

Уведомление: webpack.conf.js не нужно ничего знать о ZeptoJS, в частности. ZeptoJS может появиться в webpack.conf.js, если вы хотите WebPack дать ему специальную обработку (например, нагрузки zepto.min.js вместо zepto.js. Или даже загрузить JQuery вместо ZeptoJS!)

---

Это также возможно использовать ZeptoJS, включив его в тег < > в файл HTML и ссылаясь на $ (глобальный window.$). Однако, если ZepotoJS используется таким образом, веб-пакет не может знать, что ZeptoJS должен быть включен в комплект.

Если по какой-либо причине ZeptoJS не поддерживает загрузку в качестве модуля, его легко обернуть. (И уже сделано: https://github.com/RexMorgan/webpack-zepto)

Answer 2

Проблема обусловлена ​​самой зепто:

To prevent scope leakage, browserify/webpack wraps modules in a function. this becomes the scope of that function, and not window

Эта проблема должна быть исправлена, когда this PR будут объединены

В то же время, чтобы предотвратить эту проблему из чего вы можете использовать imports-loader:

// In your Webpack config 
module: { 
    rules: [{ 
    test: require.resolve('zepto'), 
    use: { 
     loader: 'imports-loader', 
     options: 'this=>window', 
    }, 
    }], 
}