vue引入第三方zepto.js库报错
报错: TypeError: Cannot read property 'createElement' of undefined原因:只使用了 AMD 规范的模块导出方法 define,没有用 CommonJs 规范的方法 module.exports 来导出模块,不过这不是造成报错的原因。解决办法:1、安装辅助插件库npm i -D script-loader exports-loader2、
·
报错:
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 来主动暴露需要的对象,使其模块化。
这样的方法适用于所有的库,不过最好的解决办法是从根本上让这些让这些库支持模块化。
更多推荐
已为社区贡献9条内容
所有评论(0)