我想在我的 Angular2 应用程序中包含 jQuery 和 SignalR,并使用 webpack 连接所有内容。
因此我通过 npm 安装了 jQuery。
包.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 特诺达
最佳答案
干净的解决方案:使用 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: '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 里面
关于jquery - 使用 webpack 在 Angular2 中包含 jQuery 并从组件访问它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39424340/