我想在我的Angular2-Application中包含jQuery和SignalR,并用webpack连接所有内容.
因此我通过npm安装了jQuery.
的package.json
"dependencies": { // ... "jquery": "2.1.4",// ... },
我现在在vendor.ts中定位这些文件以获取webpack以查找并包含它们:
import 'jquery'; import 'bootstrap/dist/js/bootstrap.js'; import '../../bower_components/signalr/jquery.signalR';
并且webpack获取这些文件并将它们连接起来.我可以在我的vendor.js中看到这个. jQuery出现在那里.还有jquery signalR-File.
我的webpack.config:
var webpack = require("webpack"); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { "vendor": "./wwwroot/app/vendor","polyfills": "./wwwroot/app/polyfills","app": "./wwwroot/app/boot" },output: { path: __dirname,filename: "[name]-[hash:8].bundle.js" },resolve: { extensions: ['','.ts','.js','.html'] },devtool: 'source-map',module: { loaders: [ { test: /\.ts/,loaders: ['ts-loader'],exclude: /node_modules/ },{ test: /\.html$/,loader: 'html' },{ test: /\.css$/,loader: 'raw' } ] },plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery',$: 'jquery',jquery: 'jquery' }),//new webpack.optimize.DedupePlugin(),new webpack.optimize.CommonsChunkPlugin({ name: ["app","vendor","polyfills"] }) ] }
在我的索引中加载如下:
<script src="js/polyfills-2eba52f6.bundle.js"></script> <script src="js/vendor-2eba52f6.bundle.js"></script> <script src="js/app-2eba52f6.bundle.js"></script>
但是当我尝试在我的angular2组件中使用它时:
// ... declare var jQuery:any; declare var $:any; @Injectable() export class MySignalRService { private connection; constructor() { this.connection = $.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); jQuery.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); // ... } //...
我总是得到消息
$.hubConnection is not a function
Error: jQuery was not found. Please ensure jQuery is referenced before
the SignalR client JavaScript file.
安慰“$”和“jquery”是未定义的.
如何访问webpack中的singalr-Function?
BR Tenoda
清洁解决方案:使用expose-loader !!
原文链接:https://www.f2er.com/angularjs/141610.htmlnpm install expose-loader --save-dev
在你的vendor.ts里面
> import 'expose?jQuery!jquery'; > import '../node_modules/signalr/jquery.signalR.js';
在你的webpack.config.ts中
> new ProvidePlugin({ jQuery: 'jquery',jquery: 'jquery' })
说明:
jquery.signalR.js脚本确实不是作为umd模块编写的.默认情况下,它不能由webpack加载. jquery.signalR.js脚本不需要jquery,但假设Jquery存在于全局变量window.jQuery中.
我们可以通过使用expose-loader导入jquery模块来在webpack中完成这项工作.这个加载器将确保jquery的导出值暴露给jQuery全局变量.因此允许加载signalr.js脚本作为下一个模块.
此外,如果您想稍后使用$使用signalr,您还必须使用jquery模块的provideplugin.在webpack.config.js中