Browserify converts necessary or imported packages into ES2015

Our project involves the use of imports and requires to include various third-party packages via NPM. Some of these packages are written in ES6 and need to be transpiled to ES5/ES2015 for compatibility with browsers like IE11, which do not support the arrow syntax used in functions.

While our own code is transpiled through Browserify into a more universally supported syntax, the imported packages like camelcase-keys remain in their raw format. This works fine for browsers like Chrome and Edge, but breaks in IE due to lack of support for the syntax.

We have provided our current package.json and gulpfile.js for reference. Please let us know if you require any additional information.

package.json

{
  "name": "app",
  "private": true,
  "dependencies": {
    // List of dependencies here
  },
  "devDependencies": {
    // List of devDependencies here
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ],
          "plugins": [
            "transform-es2015-classes"
          ]
        }
      ]
    ]
  }
}

gulpfile.js

// List of gulp tasks and functions

javascriptnpmgulpbrowserifybabeljs

Answer №1

In my previous experience, I have successfully utilized Webpack in conjunction with the babel-loader for transpiling.

While I initially had concerns about browserify's ability to handle all ES6 syntax on its own, I discovered the solution of using babelify for this purpose!

With babelify, you can implement a similar approach like so:

gulp.task('js', function() {
return browserify({
    entries: ['./app/app.js'],
    paths: ['./node_modules', './app/']
})
    .transform(babelify, {
        global: true,
        presets: ["es2015"]
    })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulp.dest('./public/js'));
});

By utilizing the global flag, we ensure browserify's transforms encompass the node_modules directory. Additional options like only exist for transforming specific node_modules. You also have the flexibility to include more plugins and presets based on your unique babel configuration.

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

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

javascriptjqueryajaxhtml

Activate the search feature in select2 to allow multiple selections

I'm looking for a way to incorporate a search box into my multi-select fields using select2. Oddly enough, while the search boxes show up as expected in single-select fields, applying the same select2() function to a multi-select field doesn't s ...

javascriptjqueryjquery-select2

ASP.NET ensures that the entire page is validated by the form

Is it possible to validate only a specific part of the form instead of the entire page? Currently, when I try to validate textboxes on the page, the validation is applied to all textboxes. Here are more details: https://i.stack.imgur.com/eowMh.png The c ...

javascriptc#htmlasp.net

Is it possible to execute a specified quantity of Promises simultaneously in Nodejs?

Currently, I am working on developing a web scraping application that utilizes a REST API to gather information from multiple entities on the server. The core functionality of this application can be summarized as follows: let buffer = [] for(entity in ent ...

javascriptnode.jsasync-awaitpromise

In React JS, the material-ui Accordion component's onchange function is failing to retrieve the current value

I am encountering an issue with the @material-ui Accordion where the onChange function is not capturing the current value. For example, when I click on the panel1 icon, it opens panel2 instead of taking the current value on icon click. I have provided the ...

javascriptreactjsmaterial-uiaccordion

Bypass ajax request with the use of a returned promise

I've come across a scenario where I have a function within a class that is designed to return a promise for deleting an item. Here's what the function looks like: function Delete(){ // if(this.id == ""){ // return ?; // } ...

javascriptjquery

Uncertainty surrounding command substitution with $(cat ...) in Linux

While configuring NPM to use TLS, I have encountered some confusion regarding the command substitution in BASH. For example, when I execute the following commands: npm config set cert "$(cat public.pem)" This command successfully sets the cert field in m ...

linuxbashnpm

Changing the color of a text box when it is disabled can be achieved through JavaScript

I'm facing an issue with the formatting of my HTML elements. Specifically, I have 2 combo boxes and one text box in which all 3 are disabled. However, when they are disabled, the background color of the text box does not match that of the combo boxes. ...

javascriptjsp

Creating Dynamic Input Binding in Vue.js with an Array of Computed Properties

Currently, I am faced with a situation where I need the v-model binding of an input field to be determined by the computed property's returned value. Take a look at the example provided below: <!DOCTYPE html> <html> <head> <scri ...

javascriptvue.jsvuejs2

transferring data to Amazon Web Services using Angular framework

I'm currently facing an issue while trying to send a file to an AWS server using an Angular dropzone. I have my AWS credentials ready, but I am unsure of how to properly make the request. Every time I attempt to drop the file into the dropzone, I kee ...

javascriptangularjsdropzone.js

Using JavaScript, enter the value into the input field and then redirect the

I'm encountering a minor issue with my contact form and jQuery redirection based on input fields. Everything was working smoothly until I attempted to integrate the redirection into the form validation code. Redirection snippet: $("#signup").submit ...

javascriptjquery

Unable to perform navigation during page load in a React.js application

I attempted to navigate to a route that should redirect the user back to the homepage when postOperations isn't set in the localStorage. To save time, please review the code snippet focusing on the useEffect and the first component inside return(). im ...

javascriptreactjsnode.jstypescriptnext.js

Guidelines for transferring JavaScript array data to a csv file on the client side

Despite the abundance of similar questions, I am determined to tackle this using JavaScript. Currently, I am utilizing Dojo 1.8 and have all attribute information stored in an array structured like this: [["name1", "city_name1", ...]["name2", "city_name2" ...

javascriptcsvexportclient-sidedojo-1.8

What is the best way to retrieve the Axios Post response in React?

I'm facing a small issue. In my ReactJS code, I have a post function that is functioning correctly. However, I want to access the response of this function outside its scope, right where I called it. Is there a way to achieve this? async function che ...

javascriptreactjsaxios

Struggling to understand the process of creating a new page in Express

I've created a file called ships.js in my routes folder: var express = require('express'); var router = express.Router(); /* GET Ships page. */ router.get('/ships', function(req, res, next) { res.render('ships', { tit ...

javascriptexpressroutes

Obtaining the latest record ID from MySQL using node.js

I am currently working on a project where I need to add new user information to a MySQL database. I'm looking for a way to retrieve the ID of the most recently added record so that I can create login details for the user. The environment in which this ...

mysqljsonnode.jsexpressnpm

The credentials in AWS S3Client are failing to load correctly

I encountered an issue with the S3 Client from aws sdk v3: When using the S3Client as outlined in the documentation and providing credentials via environment variables, I received an error message stating The AWS Access Key Id you provided does not exist ...

javascripttypescriptamazon-s3aws-sdk

Chatting in the hot spring with choices

I am looking to create a customizable dialog box in AngularJS where I can pass options such as title and message based on the caller. Essentially, I want to improve upon the standard alert() function. While the documentation has information on passing par ...

javascriptangularjscordovaonsen-ui

Leveraging real-time geographical location data for a weather widget with OpenWeatherAPI integration

My goal is to incorporate the current geolocation feature into a weather widget that I am developing. At the moment, I can only show data from cities based on an external source. My coding knowledge is quite limited. I am not a professional in this field, ...

javascriptwidgetcoffeescriptopenweathermapweather

What is the process for including a collection of objects in chartjs?

Is there a way to add an array of objects to chartjs? In the controller of the view, an array is passed to the Twig template using the variable {{cg}}. However, I am encountering an error that suggests the array I am working with is actually an array of ar ...

javascriptsqlarrays