如何使用Rollup构建自定义引导程序包

根据 Bootstrap 5 官方文档,我们可以从bootstrap/js/dist(Webpack, rollup, ...) 中导入预编译的 js 文件并构建自定义包。

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

在 docs 的优化部分,他们给出了如何导入 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会给出 undefined 错误bootstrap

我可以通过从js/src文件夹中导入这些文件并在它们使用时导出它们来实现我想要的,js/src/index.umd.js但遵循有关如何导入其插件的引导程序官方文档似乎无法正常工作。

以上是如何使用Rollup构建自定义引导程序包的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>