带有zepto的webpack.ProvidePlugin

Question

我有一个项目，其中使用zepto在许多模块。如你所知，webpack.ProvidePlugin是处理这种情况的最好方法，有了它，我不需要在每个模块中手动导入zepto。

zepto不会自动导出，所以我不能用ProvidePlugin导入它。

 plugins: [
    new webpack.ProvidePlugin({
      $: 'zepto'
    })
  ]

我知道有一个叫webpack-zepto的zepto包装器。

但如果我采用这种解决方案，每次zepto更新时，我都需要自己更新代码。

有什么方法可以解决我的问题吗？

Answer 1

你可以试试script-loader

webpack.config.js

loaders: [
    {
        test: require.resolve('zepto/zepto.min.js'),
        loader: 'script'
    }
]
plugins: [
    new webpack.ProvidePlugin({
        $: 'zepto/zepto.min.js'
    })
]

它将读取zepto.min.js文件并执行它，就像您将它放入脚本标记中一样，然后在您的模块中，您可以通过window.$访问zepto

更新：

如果您只是想使用$而不是window.$，您可以通过exports-loader和script-loader请求zepto.min.js文件

webpack.config.js

loaders: [
    {
        test: require.resolve('zepto/zepto.min.js'),
        loader: 'exports?window.$!script'
    }
]
plugins: [
    new webpack.ProvidePlugin({
        $: 'zepto/zepto.min.js'
    })
]