如何使用Rollup构建自定义引导捆绑包

How to build custom bootstrap bundle using Rollup(如何使用Rollup构建自定义引导捆绑包)

问题描述

根据Bootstrap 5官方文档，我们可以从bootstrap/js/dist导入预编译的js文件，并使用(webpack，ROLLUP，...)构建自定义捆绑包。

https://getbootstrap.com/docs/5.0/getting-started/javascript/#individual-or-compiled

在文档的优化一节中，他们给出了一个如何导入js文件的示例。 https://getbootstrap.com/docs/5.0/customize/optimize/#lean-javascript

问题： 我创建了一个名为bootstrap.js

的文件

import 'bootstrap/js/dist/tooltip';

并且我只想使用Tooltip插件。 我使用以下配置进行汇总

  const plugins = [
    babel({
      exclude: 'node_modules/**',
      // Include the helpers in each file, at most one copy of each
      babelHelpers: 'bundled',
      presets: [
        [
          '@babel/preset-env',
          {
            loose: true,
            bugfixes: true,
            modules: false
          }
        ]
      ]
    }),
    nodeResolve()
  ]

  const bundle = await rollup.rollup({
    input: './js/vendors/bootstrap.js',
    plugins,
  })

  await bundle.write({
    format: 'umd',
    file: './file.js'
  })

生成file.js并使用HTML页面后，控制台中出现错误file.js:1727 Uncaught ReferenceError: process is not defined

此外，我不能使用引导语法来初始化Tooltip插件 new bootstrap.Tooltip显示错误：未定义bootstrap。

我可以通过从js/src文件夹导入这些文件并按照它们在js/src/index.umd.js中使用的方式导出它们来实现我想要的效果，但遵循有关如何导入它们插件的引导官方文档似乎不能正常工作。

推荐答案

不确定如何分析代码-您缺少对Popper的全部依赖项。

但这就是我会怎么做(提示：我拿走了BS5源代码并去掉了所有不需要的东西。)

假设您在Boorstrap 5的分叉上进行编译：

文件：build ollup.config.mk.js：

'use strict'

const path = require('path')
const { babel } = require('@rollup/plugin-babel')
const { nodeResolve } = require('@rollup/plugin-node-resolve')
const replace = require('@rollup/plugin-replace')
const banner = require('./banner.js')

let fileDest = `bootstrap-mk`
const external = ['@popperjs/core']
const plugins = [
  babel({
    // Only transpile our source code
    exclude: 'node_modules/**',
    // Include the helpers in the bundle, at most one copy of each
    babelHelpers: 'bundled'
  })
]
const globals = {
  '@popperjs/core': 'Popper'
}

const rollupConfig = {
  input: path.resolve(__dirname, `../js/index.mk.umd.js`),
  output: {
    banner,
    file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
    format: 'umd',
    globals
  },
  external,
  plugins
}

rollupConfig.output.name = 'bootstrap'

module.exports = rollupConfig

.还有...

文件：jsindex.mk.umd.js

import Tooltip from './src/tooltip'

export default {
  Tooltip
}

然后从命令行调用：rollup --config build/rollup.config.mk.js --sourcemap，或将类似以下内容添加到packacge.jsonscripts部分：

  "js-compile-mk": "rollup --config build/rollup.config.mk.js --sourcemap",

.并从命令行调用npm run js-compile-mk。

输出将是名为distjsootstrap-mk.js(和地图文件)

的文件

---

如果您不想使用分支，而是使用node_modules子文件夹，请着手更改build ollup.config.mk.js文件中的路径。

这篇关于如何使用Rollup构建自定义引导捆绑包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！