使用 NPM 将 Bootstrap 添加到项目时，如何让 bootstrap.js、jquery 和 popper.js 工作？答案

【问题标题】：How to get bootstrap.js,jquery and popper.js to work when using NPM to add Bootstrap to a project?使用 NPM 将 Bootstrap 添加到项目时，如何让 bootstrap.js、jquery 和 popper.js 工作？
【发布时间】：2020-10-31 11:27:10
【问题描述】：

我已经建立了一个基础项目并通过npm添加了Bootstrap。尽管 sass 成功工作，但我在加载 Bootstrap 组件所依赖的 javascript 文件时遇到了一些麻烦。值得一提的是，我正在使用为该项目提供服务的 Vagrant Box（虚拟机）。另外，我正在使用浏览器同步插件，它启动一个迷你服务器并从 VM 中引用那个服务器。我希望我能很好地解释自己！

索引文件（在公共文件夹中）

<div class="carousel-inner" data-slide-to="2">
      <div class="carousel-item active">
        <img class="d-block w-100 " src="images/logo.jpeg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/01.jpeg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/02.jpeg" alt="Third slide">
      </div>
    </div>
  </div>
  
  <script src="./node_modules/jquery/dist/jquery.js"></script>
  <script src="./node_modules/popper.js/dist/umd/popper.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>

Package.json 文件

{
  "name": "bstrap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-task:scss-compile": "node-sass-chokidar --source-map true scss -o public/css",
    "build-task:autoprefixer": "postcss public/css/*.css --use autoprefixer postcss-nested -d public/css",
    "sass:build": "npm-run-all -p build-task:*",
    "sass:watch": "chokidar \"scss/**/*.scss\" -c \"npm run sass:build\"",
    "sass:browsersync": "browser-sync start --proxy \"strap.test\" --files \"public\"",
    "dev": "npm-run-all -p sass:*"
  }

控制台错误

【问题讨论】：

这能回答你的问题吗？ Can we serve static files in a node module for a server?
@Dshiz Humm... 我正在使用 browser-sync 提供的迷你服务器，它引用 vagrant 服务器（因为我使用的是 VM 宅基地盒）所以我看不到这是怎么回事可能与我的问题有关。您的问题虽然让我意识到 node_modules 文件夹位于项目根目录中，但这意味着没有提供服务。真的。但是，我承认，我仍然在这里挣扎。如果我现在很烦人，真的很抱歉......
您可能需要澄清您的问题，并针对您要解决的问题提供更具体的描述和代码。
我希望问题和描述现在有意义。

标签： javascript html jquery css bootstrap-4

【解决方案1】：

当我将 NPM 与 Bootstrap 一起使用时，我实际上并没有将 node_modules 文件夹部署到服务器（生产/暂存），所以当我构建本地项目时，我倾向于将这些节点模块导入我的主 js src文件并将它们编译到分发文件夹。

如果您像您一样直接调用node_modules，您也需要将node_modules 上传到您的生产/暂存环境，我认为这并不理想。

我如何将 jQuery、Bootstrap 和 Popper 导入我的 src/js/theme.js，然后编译为 dist/js/theme.js，是这样的......

// load jquery
import jQuery from 'jquery';
window.jQuery = window.$ = jQuery;

// pull in our vendors
require('bootstrap');
require('popper.js');

// all your custom js here...

然后像这样简单地获取分发theme.js文件...

<script src="/dist/js/theme.js"></script>

【讨论】：