使用 Webpack + Typescript 未定义引导切换 JQuery 插件答案

【问题标题】：bootstrap-toggle JQuery plugin undefined using Webpack + Typescript使用 Webpack + Typescript 未定义引导切换 JQuery 插件
【发布时间】：2021-02-25 13:30:06
【问题描述】：

我正在尝试将 JQuery 插件 bootstrap-toggle 与我的 Webpacked Typescript 项目一起使用，但每次我尝试调用它时，它都会给我一个 is not a function 错误，并且实际的句柄是未定义的。

我注意到 webpack 不包含该模块，因此我将它的导入放在顶部。

import * as $ from 'jquery';
import 'bootstrap-toggle';
$("#test-toggle").bootstrapToggle();

HTML：

<label>
    <input id="test-toggle" name="testtoggle" data-toggle="toggle" type="checkbox">
    Test Toggle
</label>

Webpack 配置：

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './app.ts',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
};

Webpack 输出：

[webpack-cli] Compilation finished
asset bundle.js 199 KiB [emitted] [minimized] (name: main) 1 related asset
modules by path ../node_modules/ 532 KiB
  modules by path ../node_modules/bootstrap/ 73.6 KiB 13 modules
  ../node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
  ../node_modules/bootstrap-toggle/js/bootstrap-toggle.js 5.41 KiB [built] [code generated]
modules by path ./ 632 b
  modules by path ./*.ts 632 b
    ./app.ts 632 bytes [built] [code generated]
webpack 5.4.0 compiled successfully in 5743 ms

我正在使用的版本：

"@types/bootstrap": "^5.0.0",
"@types/bootstrap-toggle": "^2.2.1",
"@types/jquery": "^3.5.4",
"bootstrap": "^3.4.1",
"bootstrap-toggle": "^2.2.2",
"jquery": "^3.5.1",
"ts-loader": "^8.0.11",
"typescript": "^4.0.5",
"webpack": "^5.4.0"

【问题讨论】：

标签： jquery typescript webpack

【解决方案1】：

原来我的页面正在加载一个外部 JQuery 库以及加载我在测试期间忘记删除的 bundle.js。

这给了我一个 JQuery 未定义的可行错误，所以我进入库并添加了一个我从另一个 JQuery 插件获取的包装器。

(function(factory){
    if (typeof define === 'function' && define.amd){
        define(['jquery'], factory);
    } else if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }
} (function(jQuery) {

// ... boostrap-toggle code

return jQuery.bootstrapToggle;}));

这一切都很好。

【讨论】：