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: bootstrap 未定义

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

Github Bootstrap 5 npm starter

Bootstrap 5.1

波普尔 2.9.2

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

Answer 1

我不是超级专家，不确定问题是否足够清楚，但由于性能问题和由于定义，库之间可能会崩溃，并且可能会在没有构建过程的情况下进行更新，而且您的站点可能会受到 google 引擎的惩罚。

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

关于其他自定义库或您创建的 vanilla 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' 任务。我很不高兴，因为我之前的回答与 bootstrap 文档不一致。

从那以后我就成功地使用了这个配置的 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`),
    },
},

bootstrap 导入文件如下所示：

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 中包含哪些组件。

Bootstrap 5 与 Grunt 捆绑和优化 js

Bootstrap 5 with Grunt to bundle and optimise js

javascript

gruntjs

bootstrap-5