使用 NPM 將 Bootstrap 添加到項目時，如何讓 bootstrap.js、jquery 和 popper.js 工作？

Question

我已經建立了一個基本項目並通過 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:*"
  }

控制台錯誤

Answer 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>