我正在处理一个基于Angular、Webpack等技术的项目。当我想要使用angular-summernote时,遇到了一个非常有趣的问题。
它不能正常工作,并显示错误“TypeError: element.summernote不是一个函数”。如果将库添加为script标签,而没有任何构建工具,则它可以正常工作,但与Webpack一起使用时则无法正常工作。
那么,让我们看看文件和配置。 webpack.config.js
我发现了一个Github问题,但它仍然处于“开放”状态。
我进行了一些调试,检查了“summernote”指令的“link”方法,并将“element”记录到控制台中,它的proto对象不包含任何jquery方法,包括“summernote”方法。为什么?如何使其工作?
它不能正常工作,并显示错误“TypeError: element.summernote不是一个函数”。如果将库添加为script标签,而没有任何构建工具,则它可以正常工作,但与Webpack一起使用时则无法正常工作。
那么,让我们看看文件和配置。 webpack.config.js
let webpack = require('webpack');
let path = require('path');
module.exports = {
entry: {
bundle: [
'./app/app.js'
]
},
output: {
path: path.join(__dirname, './public'),
filename: '[name].js',
},
resolve: {
root: __dirname,
extensions: ['', '.js'],
modulesDirectories: [
'node_modules',
'app'
],
},
externals: {
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js$/,
exclude: /(node_modules|bower_components)/
}
]
}
};
app/app.js
// Load libs
import angular from 'angular';
import ngRoute from 'angular-route';
import summernote from 'summernote';
import ngSummernote from 'angular-summernote/dist/angular-summernote.js';
// App
angular.module('app', [ngRoute, 'summernote'])
.config(function($routeProvider) {
// Router
$routeProvider
.when('/', {
template: '<summernote></summernote>'
});
});
我发现了一个Github问题,但它仍然处于“开放”状态。
我进行了一些调试,检查了“summernote”指令的“link”方法,并将“element”记录到控制台中,它的proto对象不包含任何jquery方法,包括“summernote”方法。为什么?如何使其工作?