javascript - webpack:在构建中实现 zeptojs

Question

我正在尝试将 ZeptoJS 添加到我的 webpack vendor 包中，但我一直收到错误消息:

"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 在加载事件中加载。

有没有人以前遇到过这个问题并就如何使它起作用提供建议？谢谢。

Answer 1

这个问题是由于 Zepto 本身:

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',
    },
  }],
}