Twitter bootstrap 将引导添加到Web包

我可以在这里使用一些有用的指导，全新的webpack和chrome扩展，并尝试扩展此项目：

这已经定义了jquery，当我运行npm安装和npm运行build时，vendor.js是在jquery中生成的。我还想使用bootstrap，我将package.json更改为包含bootstrap，如下所示：

"dependencies": {
"jquery": "~3.3.1",
"bootstrap":"^4.1.1", -- ADDED THIS
"moment": "~2.22.0"
 },
"devDependencies": {
"@types/chrome": "~0.0.63",
"@types/jquery": "~3.3.1",
"@types/bootstrap":"^4.1.1", -- ADDED THIS
"ts-loader": "~4.2.0",
"typescript": "~2.8.1",
"webpack": "~4.5.0",
"webpack-cli": "~2.0.14",
"webpack-merge": "~4.1.2"
}

我不确定要对webpack做什么更改，因为其中似乎没有任何特定于jquery的内容，但当我运行npm run build时，vendor.js不包括引导

我想我已经完全离开这里了，假设package.json有一个指向webpack.common.js的链接，但我在谷歌上搜索到的所有文章都在谈论将导入引导放在app.js中，而chrome扩展没有app.js或任何用于导入jquery的行或任何东西

抱歉，我想问一下答案，但在谷歌搜索了很多次之后，我还是不太清楚，我很感激我需要对网页进行哪些更改才能使其正常工作，以下是现有的文件：

const webpack = require("webpack");
const path = require('path');

module.exports = {
    entry: {
        popup: path.join(__dirname, '../src/popup.ts'),
        options: path.join(__dirname, '../src/options.ts'),
        background: path.join(__dirname, '../src/background.ts'),
        content_script: path.join(__dirname, '../src/content_script.ts')
    },
    output: {
        path: path.join(__dirname, '../dist/js'),
        filename: '[name].js'
    },
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: "initial"
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        // exclude locale files in moment
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]
};

---

您需要

require（'bootstrap'）

（或

导入'bootstrap'；

）在一个.js文件中，通常是条目文件，以便将其包含在webpack捆绑包中。添加到package.json并不自动意味着它将被包括在内；它需要明确地被引用/使用。

对我来说，这是唯一可行的方法

在js scrypts中添加：

import $ from 'jquery';
global.jQuery = $;
global.$ = $;

import Popper from 'popper.js'
global.Popper = Popper

import 'bootstrap'

// there $.fn defined anyway
// and in chrome console too (in first way)

第二种方式（不起作用）：

但如果要以较低的方式执行，我不知道为什么，在scrypt上的控制台结束时，$.fn未定义。它就像控制台和webpack构建中使用的$的其他示例一样。

---

有人能解释一下吗？

啊，我明白了，所以在其中一个文件中，我从“jquery”导入了*作为$；因此，我添加了导入“引导”；下面，我可以看到它现在包括。只需要把CSS包括在内，这不是这个网页的一部分，回到研究。谢谢你的帮助！很高兴你成功了！我建议使用引导的sass实现，并在主scss文件中基本上执行相同的操作（导入）。

// ! comment this strings
// import $ from 'jquery';
// global.jQuery = $;
// global.$ = $;

// add in config
plugins: [
     new webpack.ProvidePlugin(
        {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'global.jQuery': 'jquery',
            'global.$': 'jquery',
        },
     ),
...