无法在 TS 脚本中导入引导库答案

【问题标题】：Can't import bootstrap lib in TS script无法在 TS 脚本中导入引导库
【发布时间】：2017-09-15 07:57:17
【问题描述】：

我遇到了一个问题，我似乎无法在我的打字稿文件中导入 bootstrapjs。我需要这个来打开一个模式。

我的打字稿：

import $ from 'jquery';
import 'bootstrap';

$('#btn').click(function () {
    $('#test').text('sasasa');
});

我的看法

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                test
            </h3>
        </div>
        <div class="panel-body">
            <span id="test">Test</span>

            <button id="btn">Klik</button>
        </div>
    </div>
</div>

@section scripts {
    <environment names="Development">
        <script src="~/js/quotation-test.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="~/js/quotation-test.js" asp-append-version="true"></script>
    </environment>
}

当我在 typescript 脚本上运行时，我的控制台中出现以下错误：

Uncaught ReferenceError: jQuery is not defined
    at Object.562 (quotation-test.js:103)
    at __webpack_require__ (common.js:55)
    at Object.561 (quotation-test.js:27)
    at __webpack_require__ (common.js:55)
    at Object.560 (quotation-test.js:13)
    at __webpack_require__ (common.js:55)
    at webpackJsonpCallback (common.js:26)
    at quotation-test.js:1

但是，当我删除 import 'bootstrap' 行时，btn 点击处理程序可以正常工作。所以看起来 jQuery 被正确导入了。

手动添加脚本（即：）

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

模态运行良好，但我宁愿不走那条路。有没有人有什么建议？我在网上找不到任何似乎有同样问题的资源。

我的（相关部分）package.json：

    "@types/bootstrap": "^3.3.36",
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1",

有人有什么建议吗？任何帮助将不胜感激。

【问题讨论】：

标签： javascript twitter-bootstrap typescript

【解决方案1】：

当使用 ES6/CommonJS 导入 jQuery 时，它不会创建 bootstrap 包所依赖的全局变量。您需要显式创建全局 jQuery 变量，以便引导程序可以使用它：

import $ from 'jquery';
window['jQuery'] = $;
import 'bootstrap';

【讨论】：

这对我来说不太管用（得到一个关于 Window 没有索引签名的 TypeScript 错误）但你的回答引导我朝着正确的方向前进，我找到了这个解决方案：stackoverflow.com/a/39283602/3061857 和这样可行。谢谢！

【解决方案2】：

mb 引导程序使用“JQuery”，而不是“$”。尝试“导入'jquery';”或“导入 { jQuery} 'jquery';”

【讨论】：