这是我的配置:
// [ webpack.config.vendor.js ]
...
module.exports = (env) => {
entry: {
vendor: [
...
'font-awesome/css/font-awesome.css',
'froala-editor/css/froala_editor.pkgd.css',
'froala-editor/css/froala_style.css',
'jquery'
...
]
},
plugins: {
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
...
},
...
}
}
// [ Layout.module.ts ]
// I created a LayoutModule, to group all layout stuff
// Import the Froala Editor plugin.
import "froala-editor/js/froala_editor.pkgd.min.js";
// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
@NgModule({
imports: [
...
// Froala
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot()
],
exports: [
...
FroalaEditorModule,
FroalaViewModule,
]
})
export class LayoutModule { }
// [ mycomponent.html ]
<textarea [froalaEditor] class="form-control" name="summary" id="summary" formControlName="summary"></textarea>
一切都编译得很好,我可以从命令行运行以下命令,没有问题。
webpack
webpack --config webpack.config.vendor.js
ERROR ReferenceError: $ is not defined
at new FroalaEditorDirective (editor.directive.js:29)
at createClass (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:15748)
at createDirectiveInstance (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:15579)
at createViewNodes (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17007)
at callViewAction (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17451)
at execComponentViewsAction (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17360)
at createViewNodes (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17034)
at createRootView (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:16902)
at callWithDebugContext (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:18283)
at Object.debugCreateRootView [as createRootView] (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17600)
我不知道问题出在哪里,显然$(jQuery)没有按预期导入。
任何指向正确方向的点都将受到赞赏。