vue引入第三方zepto.js库报错

报错：

 TypeError: Cannot read property 'createElement' of undefined

原因：

只使用了 AMD 规范的模块导出方法 define，没有用 CommonJs 规范的方法 module.exports 来导出模块，不过这不是造成报错的原因。

解决办法：
1、安装辅助插件库

npm i -D script-loader exports-loader

2、webpack.config.js配置

// webpack.config
{
  // ...
  module: {
    loaders: [{
      test: require.resolve('zepto'),
      loader: 'exports-loader?window.Zepto!script-loader'
    }]
  }
}

3、就可以直接引用啦

// entry.js
import $ from 'zepto'

$(function () {
  // ...
})

4、如果需要全局使用，则可以配置

var webpackPlugins = [
    new webpack.ProvidePlugin({
      Vue: 'vue',
      nx: 'next-js-core2',
      $: 'zepto',
    }),
    new webpack.NoErrorsPlugin(),
    // split vendor js into its own file,
    new ExtractTextPlugin('[name]-[contenthash:5].css')
  ];

5、总结

由于我们用 npm 下载的模块没有模块化，因此我们要使用：

script-loader 全局上下文环境中执行模块 JS 文件；
exports-loader 添加 module.exports 来主动暴露需要的对象，使其模块化。
这样的方法适用于所有的库，不过最好的解决办法是从根本上让这些让这些库支持模块化。