使用webpack在Angular2中包含jQuery并从组件访问它
我想在我的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/'); // ... } //... 我总是得到消息
安慰“$”和“jquery”是未定义的. 如何访问webpack中的singalr-Function? BR Tenoda
清洁解决方案:使用expose-loader !!
npm 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' }) 说明: 此外,如果您想稍后使用$使用signalr,您还必须使用jquery模块的provideplugin.在webpack.config.js中 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |