使用角度，打字稿，webpack时如何将jquery添加到窗口对象

Posted 2023-03-13

【中文标题】使用角度，打字稿，webpack时如何将jquery添加到窗口对象

【英文标题】：How to add jquery to window object when using angular, typescript, webpack

【发布时间】：2017-04-05 14:13:42

【问题描述】：

我已将 ng2 webpack 指南反向移植到 ng1 - https://angular.io/docs/ts/latest/guide/webpack.html

我有 3 个入口文件 - polyfill.ts、vendor.ts 和 main.ts。这是 webpack 将它们加载到浏览器中的方式。我已将以下内容添加到 vendor.ts

import 'jquery';
import 'angular';
import 'angular-ui-router';
import 'angular-ui-bootstrap';
import 'angular-loading-bar';
import 'checklist-model';
import 'restangular';
import 'lodash';
import 'moment';
import 'bootstrap-datepicker';

以及以下到 main.ts

import "./styles/main.scss";

import app from './app';
import * as $ from 'jquery';

var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;

angular.bootstrap(document, [app], 
    strictDi: true
);

开发工作流程运行得非常好，但唯一的问题是，当角度加载时，jquery/$ 不在窗口对象上，而是使用 jqLit​​e，这让我很难使用 jquery 插件。下面是我从另一个使用 ES5 的项目中移植的日期选择器指令：

export function DatePickerDirective($timeout: ng.ITimeoutService): ng.IDirective 
    'ngInject';

    return 
        restrict: 'A',
        require: '?ngModel',
        link: link
    ;

    function link(scope: any, element: any, attrs: any, ngModel: any) 
        'ngInject';

        $timeout(function () 
            element.bootstrapDP(
                format: 'dd/mm/yyyy',
                forceParse: true,
                autoclose: true,
                todayBtn: 'linked',
                todayHighlight: true,
                daysOfWeekHighlighted: [0, 6]
            );

        );

        scope.$on('$destroy', function () 
            element.bootstrapDP('remove');
        );

    

“元素”指的是 jqLit​​e，因此它找不到 .bootstrapDP 属性。有没有办法设置 typescript 或 webpack 以使 angular 使用 jquery？

【问题讨论】：

在你的 webpack 配置中尝试 externals: jquery: 'jQuery' 如果它不能单独解决它，那么也将它添加到你的 html 的脚本标签中 (<script src="https://code.jquery.com/jquery-x.x.x.js">) webpack.js.org/configuration/externals

感谢您的回复，但由于这是一个内部应用程序，我不想依赖任何 CDN。我已经发布了我的解决方案。

【参考方案1】：

我最终将以下内容添加到我的 main.ts 并摆脱了 datepicker 上的无冲突。

import app from './app';
import * as $ from 'jquery';

declare var window : any; <--- THIS LINE
window.$ = window.jQuery = $; <--- AND THIS LINE

angular.bootstrap(document, [app], 
    strictDi: true
);

它仍然感觉有点恶心，但我不想依赖任何 CDN