Bootstrap 5 与 Grunt 捆绑和优化 js

Question

我已成功使用 Grunt 将 bootstrap 5 scss 捆绑到一个文件中。我已经设置好了，所以我可以根据项目的需要添加和删除组件 scss 以进行优化。

我现在正在尝试对 js 做同样的事情。

我正在使用 grunt-contrib-uglify 完成以下任务：

uglify: {
    site: {
        options: {
            sourcemap: false
        },
        files: {
            'example/static/example/assets/js/example.min.js': [

                // popper bs5 dependency
                'node_modules/@popperjs/core/dist/umd/popper.js',

                // bootstrap 5 core js
                'node_modules/bootstrap/js/dist/dom/data.js',
                'node_modules/bootstrap/js/dist/dom/event-handler.js',
                'node_modules/bootstrap/js/dist/dom/manipulator.js',
                'node_modules/bootstrap/js/dist/dom/selector-engine.js',

                // component js
                // note ordering of components can be important
                // eg. popover relies on tooltip, therefore tooltip must therefore go first
                'node_modules/bootstrap/js/dist/base-component.js',
                'node_modules/bootstrap/js/dist/alert.js',
                'node_modules/bootstrap/js/dist/button.js',
                'node_modules/bootstrap/js/dist/carousel.js',
                'node_modules/bootstrap/js/dist/collapse.js',
                'node_modules/bootstrap/js/dist/dropdown.js',
                'node_modules/bootstrap/js/dist/modal.js',
                'node_modules/bootstrap/js/dist/offcanvas.js',
                'node_modules/bootstrap/js/dist/scrollspy.js',
                'node_modules/bootstrap/js/dist/tab.js',
                'node_modules/bootstrap/js/dist/toast.js',
                'node_modules/bootstrap/js/dist/tooltip.js',
                'node_modules/bootstrap/js/dist/popover.js',

                // custom js
                'example/src/js/**/*.js'
            ]
        }
    },
},

我将它包含在我的 html 中，然后在它下面有一个脚本，例如。

<script>
    var myOffcanvas = document.getElementById('offcanvasExample')
    var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
</script>

我得到错误：

ReferenceError：未定义引导程序

在控制台中。我从捆绑包中缺少什么来完成这项工作？我在 Github 上使用了 npm bs5 starter 作为文件的参考，例如。 popper 依赖，核心 js 并在 node_modules/bootstrap/js/dist 文件夹中导入所有其他组件文件。

Github Bootstrap 5 npm starter

引导 5.1

波普尔 2.9.2

编辑：与分布式捆绑包一起正常工作。

Answer 1

我不是超级专家，不确定问题是否足够清楚，但由于性能问题和可能的崩溃，我不建议将 Boostrap 之类的库连接到框架外的其他 JS 文件中的单个主文件中由于定义，在库之间，以及在没有构建过程的情况下更新的可能性以及您的网站可能会受到谷歌引擎的惩罚。

除此之外，Boostrap 通常已经提供了 .min.css 和 .min.js 已经压缩/缩小/uglified 如果您不打算更改原始设计模式的任何内容，则可以使用，如果您不打算自定义它，请避免使用解压缩文件.

关于其他自定义库或您创建的香草 JS 的其余部分，如果您想检查可以使用的性能，您也可以使用 grunt-contrib-concat PageSpeed Insights 的结果将知道究竟需要应用什么来获得更好的性能和优化。

Answer 2

所以使用上面相同的 grunt uglify 任务，你可以：

<script>
    var myOffcanvas = document.getElementById('offcanvasExample')
    var bsOffcanvas = Offcanvas(myOffcanvas)
</script>

（注意从脚本中删除了 new bootstrap.）。我认为这是因为单独导入组件文件时，您没有将 Bootstrap 作为模块导入。因此，与捆绑包不同，它不可用。

但是，组件作为单独的函数被导入并且可用（很像上面示例中的 Offcanvas）

编辑

由于 bootstrap 5 使用汇总来捆绑其 javascript，我现在已经研究了“grunt-rollup”任务。我对我之前的回答与引导文档不一致感到不高兴。

我已经通过这个配置成功地使用了 grunt-rollup 任务：

// gruntfile imports
const babel = require("@rollup/plugin-babel").default;
const path = require('path')
const {nodeResolve} = require("@rollup/plugin-node-resolve");

// rollup task
rollup: {
    options: {
        plugins: [
            babel({
                exclude: './node_modules/**',
                babelHelpers: 'bundled',
            }),
            nodeResolve()
        ],
        globals: {
            '@popperjs/core': 'Popper'
        },
        external: ['@popperjs/core'],
        format: 'umd',
        name: 'bootstrap',
    },
    files: {
        src: path.resolve(__dirname, `path/to/bootstrap5/imports/file`),
        dest: path.resolve(__dirname, `path/to/export/file`),
    },
},

引导导入文件如下所示：

import Alert from 'node_modules/bootstrap/js/src/alert'
import Button from 'node_modules/bootstrap/js/src/button'
import Carousel from 'node_modules/bootstrap/js/src/carousel'
import Collapse from 'node_modules/bootstrap/js/src/collapse'
import Dropdown from 'node_modules/bootstrap/js/src/dropdown'
import Modal from 'node_modules/bootstrap/js/src/modal'
import Offcanvas from 'node_modules/bootstrap/js/src/offcanvas'
import Popover from 'node_modules/bootstrap/js/src/popover'
import ScrollSpy from 'node_modules/bootstrap/js/src/scrollspy'
import Tab from 'node_modules/bootstrap/js/src/tab'
import Toast from 'node_modules/bootstrap/js/src/toast'
import Tooltip from 'node_modules/bootstrap/js/src/tooltip'

export default {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Offcanvas,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip
}

现在您可以选择在 js 中包含哪些组件。