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会在加载事件时被加载。

有人之前遇到过这个问题并提供了解决建议吗？谢谢。

- rolu

---

你是如何在代码中引入zepto的？我认为webpack配置决定了模块的加载方式，但它本身不应该加载模块。在大多数情况下，webpack配置不需要特殊设置来支持zepto。（在源文件中应该有一行需要zepto的代码，例如：require('zepto')或import 'zepto'） - Leftium

Zepto 在页面加载后执行。 - rolu

是的，但一定有一个文件在使用 zepto。那个文件是哪个，它又是如何表达“我需要zepto”的呢？ - Leftium

Answer 1

问题是由Zepto本身引起的：

为了防止作用域泄漏，browserify/webpack在函数中包装模块。`this`变成了该函数的作用域，而不是`window`。

当this PR合并后，这个问题应该会得到解决。

同时，在此期间，为了防止出现这个问题，您可以使用imports-loader。

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

- Thibaut Remy

Answer 2

在使用ZeptoJS之前，任何使用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添加到 bunlde 中。

请注意，webpack.conf.js 不需要特别了解 ZeptoJS。如果您想让 webpack 对其进行特殊处理（例如加载zepto.min.js而不是zepto.js。或者甚至加载jQuery而不是ZeptoJS！），则可以在 webpack.conf.js 中出现ZeptoJS。

---

也许可以通过在HTML文件中包含一个<script>标签并引用全局变量window.$来使用ZeptoJS。但是，如果以这种方式使用ZepotoJS，则webpack无法知道应该将ZeptoJS包含在捆绑包中。

如果由于某种原因ZeptoJS不支持作为模块加载，那么简单的包装就可以解决。（已经有人做过了：https://github.com/RexMorgan/webpack-zepto）

- Leftium