加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

使用webpack在Angular2中包含jQuery并从组件访问它

发布时间:2020-12-17 07:19:10 所属栏目:安全 来源:网络整理
导读:我想在我的Angular2-Application中包含jQuery和SignalR,并用webpack连接所有内容. 因此我通过npm安装了jQuery. 的package.json "dependencies": { // ... "jquery": "2.1.4",// ... }, 文件和文件夹已正确安装. 我现在在vendor.ts中定位这些文件以获取webpac
我想在我的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 !!
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.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中

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读