使用 Gulp 4 导入/捆绑 Bootstrap 5 或 Popper.js 会生成

Question

我在 Bootstrap 5 项目上使用 Gulp 4 和 Webpack 5，当我捆绑我的脚本时，Gulp 生成了一个bundle.js（如预期的那样），但它也生成了一个bundle.js.LICENSE.js文件。我在我的构建任务中看不到任何可以创建它的东西。似乎只有当我import 'bootstrap'或import Popper from 'popper.js/dist/umd/popper'.有没有办法禁用该 LICENSE 文件的生成？我猜 Bootstrap 5 js 中有某些东西迫使 Gulp 或 Webpack 创建该文件（？）任何想法将不胜感激。这是我的构建脚本任务：// Build Scripts Taskconst buildScripts = (mode) => (done) => {  let streamMode;  if (mode === 'development') {    streamMode = require('./webpack/config.development.js');  } else if (mode === 'production') {    streamMode = require('./webpack/config.production.js');  } else {    streamMode = undefined;  }    ['development', 'production'].includes(mode) ? pump([    gulp.src(srcPath('js')),    vinylNamed(),    webpackStream(streamMode, webpack),    gulpSourcemaps.init({ loadMaps: true }),    through2.obj(function (file, enc, cb) {      const isSourceMap = /\.map$/.test(file.path);      if (!isSourceMap) {        this.push(file);      }      cb();    }),    gulpBabel({      presets: ['@babel/preset-env'],    }),    ...((mode === 'production') ? [gulpUglify()] : []),    gulpSourcemaps.write('./'),    gulp.dest(distPath('js')),    browserSync.stream(),  ], done) : undefined;};

Answer 1

Webpack 用于优化文件的插件称为 Terser，它具有将与特定模式匹配的内联注释提取到外部文件（默认情况下是您看到的许可模式）的选项。

https://webpack.js.org/plugins/terser-webpack-plugin/

module.exports = {

  optimization: {

    minimize: true,

    minimizer: [

      new TerserPlugin({

        terserOptions: {

          //...

          extractComments: true

        },

      }),

    ],

  },

}

默认情况下仅使用 /^**!|@preserve|@license|@cc_on/i regexp 条件提取评论并删除剩余的评论。如果原始文件名为 foo.js，则评论将存储到 foo.js.LICENSE.txt。terserOptions.format.comments 选项指定是否保留注释，即可以在提取其他注释或什至保留已提取的注释的同时保留一些注释（例如注释）。

检查您的config.production.jswebpack 文件，看看是否在其中使用了这些选项。它确实默认为true。