Can using Gulp 4 to import or bundle Bootstrap 5 or Popper.js create a LICENSE.js file?

I am currently working on a project using Gulp 4 and Webpack 5 with Bootstrap 5. During the script bundling process, I have noticed that Gulp generates a bundle.js file as expected, but it also creates a bundle.js.LICENSE.js file.

After examining my build task, I couldn't find anything that would cause this additional file to be generated.

Interestingly, this seems to occur only when I use import 'bootstrap' or

import Popper from 'popper.js/dist/umd/popper'
.

Is there a way to prevent the generation of the LICENSE file? It's possible that Bootstrap 5's JavaScript contains something that triggers Gulp or Webpack to create it.

Any insights or suggestions would be greatly appreciated. Below is the snippet of my build scripts task:

// Build Scripts Task
const 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

When optimizing files, the Webpack addon known as Terser can be utilized to extract inline comments that match a specific pattern and store them in an external file (typically following a License pattern).

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          //...
          extractComments: true
        },
      }),
    ],
  },
}

By default, only comments matching the /^**!|@preserve|@license|@cc_on/i regex condition are extracted, while all other comments are removed. If the original file is named foo.js, the extracted comments will be saved in foo.js.LICENSE.txt. The terserOptions.format.comments parameter determines whether the comments should be preserved or not, allowing for the selective preservation of certain types of comments.

Review your config.production.js webpack configuration file to check if these options are being applied. By default, they are set to true.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using AngularJS to extract data from a JSON feed that contains a namespace

Just diving into Angular and I'm loving it. Struggling with parsing a JSON feed that has namespaces, need some help: Here's an example from the JSON feed: "title": { "label": "Fuse" }, "im:name": { "label": "John Doe" }, "im:image": [ { ...

Angular, delete any item from the scope that has a matching key value

One of the challenges I am facing is removing items from an array with the same key value of skillId when a button in the repeat is clicked. Here's the code snippet I have worked on: $scope.deleteSkill = function(skill) { for (var i=0; i<$ ...

Having trouble dynamically displaying the '<' symbol using JavaScript?

Whenever I attempt to show a string with the character '<' in it, the part of the string that comes after the symbol is not displayed. Strangely enough, when I output it to the console, it appears correctly. Take a look at this excerpt showcas ...

How can I adjust iframe content to fit properly on a mobile device screen?

I am facing a challenge where I need to embed an iframe into an external website over which I have no control. The only thing I can specify is the size of the iframe on my own website. My goal is to ensure that the content within the iframe adjusts to fit ...

Troubleshooting my nodejs websocket chat for message sending glitches

The chat system is built on nodejs using websockets from socket.io library. While I have a client that also utilizes websockets from socket.io, I'm facing challenges in making the two communicate effectively. The issue seems to be with the client not ...

Is there a way to identify when a fresh google instant page appears?

I am currently developing a browser extension that requires making a call when a new Google instant page is loaded and then modifying the results, similar to SEOQuake. One problem I encountered is that if a user pastes a link directly into the URL field a ...

What is the best way to attach 'this' to an object using an arrow function?

Consider having an object named profile which consists of properties name and a method called getName (implemented as an arrow function). profile = { name: 'abcd', getName: () => { console.log(this.name); } } I am interes ...

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

What is the best way to determine the normals of a closed shape in three.js?

I am currently developing a custom mesh importer for my proprietary file format. The challenge I'm facing is that the format does not include normal data. As a result, I am exploring methods to calculate normals for enclosed shapes and then apply thos ...

Build a custom loader in Next JS that leverages Webpack to dynamically map URL paths to specific components

I am looking to implement a custom loader in Next.js that leverages Webpack through the next.config.js configuration file. This loader should route Blog.js for the /blog route and Tutorial.js for the /tutorial route. The MDX data is stored in the pages/ d ...

I am continuously encountering an error message saying [$injector:modulerr] while working with AngularJS

I've been reviewing my JavaScript code thoroughly, but I can't seem to pinpoint any major issues. The error message I'm encountering is as follows: Uncaught Error: [$injector:modulerr] Failed to instantiate module careApp due to: Error: [$i ...

Vue component with a variable number of rows, each containing a variable number of input fields

I am currently working on creating a form that can have a variable number of steps. Users should be able to add an additional step by clicking a button. Each step will contain some input fields and buttons to dynamically create more input fields. For inst ...

The installation of robotjs via npm failed due to issues encountered while trying to build the binaries

After attempting to execute the command "npm install robotjs -g," an error is thrown back at me. [email protected] install C:\Users\Ehsan\AppData\Roaming\npm\node_modules\robotjs prebuild-install || node-gyp reb ...

Is webpack necessary for segregating dependencies during installation?

Currently, I'm diving into a tutorial on webpack and it's been three days already, but confusion still reigns! I am delving into the commands: npm i webpack --save-dev I find myself puzzled by the '--save-dev' in the above command whi ...

Remove the "x" character from the phone field if an extension is not provided in the Jquery masked input plugin

Currently utilizing the jquery Masked input plugin. The mask I have applied to a field is as follows: "?999-999-9999 x9999" Why is there a ? at the beginning? This was implemented to prevent the field from clearing out when an incomplete number is ente ...

The application of knockoutjs bindings is restricted to specific ids and cannot be used on any

In my project, I have multiple views where each one applies bindings to its own tag individually. Here is a snippet of the code: (Please note that some code has been omitted for brevity. For a more complete example, you can view the full fiddle here: http ...

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...

When a child is added to a parent in Angular UI Tree, it automatically appears in all parent nodes as well

I've been experimenting with the drag and drop feature of Angular UI Tree, and I've encountered a puzzling issue. The JSON data is fetched from my services. Upon receiving it in my controller, I need to format it correctly by adding an empty arra ...

'this' in Arrow functions does not have a reference to the calling context

Something seems off about the context in this code. I've left comments to describe my issue below: const cat = { //arrow function meow: () => { console.log(this); }, makeMeow(){ // Why does 'this' refer ...

What is the best way to determine the index of the area that was clicked on in chartjs?

I am currently working with a chart that may not have elements at specific indices, but I am interested in determining the index of the area clicked. https://i.sstatic.net/rEMbG.jpg When hovering over an area without an element, the assigned tooltip is d ...