Add babel to "old" angularJS project

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-optional-chaining",
        "angularjs-annotate"
    ],
    "env": {
        "production": {
            "plugins": [
                "transform-remove-console",
                "transform-remove-debugger"
            ]
        },
        "stage": {
            "plugins": [
                "transform-remove-console",
                "transform-remove-debugger"
            ]
        },
        "develop": {
            "plugins": [],
            "compact": false
        }
    },
    "comments": false,
    "compact": true
}

.browserslistrc

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead

not IE 9-10 # For IE 9-11 support, remove 'not'.

iOS >= 10
Android >= 5

last 2 QQAndroid versions
last 2 Samsung versions
last 2 UCAndroid versions

README.md

How to run

$ cross-env BABEL_ENV=develop gulp myTask

If you don't have already cross-env, then install this package local

npm i -D cross-env

or global

npm i -g cross-env

any_script.js

'use strict';

/*
 * @ngInject
 */
function MyController(
    $rootScope,
    $scope
) {
      // ... my code
}

angular
        .module('myApp')
        .component('MyComponent', {
            templateUrl: 'my-component.component.html',
            controller: MyController,
            bindings: {
              // ...
            }
        });

// MEMO: with @ngInject you do not need to manuall add dependencies in the code. Just put this in JSDoc on every controller/services.

Gulpfile.babel.js

'use strict';

// ... other code

const $babel = require('gulp-babel');

// ... other code

gulp.task('ngScripts', () => {
    const list = [...]; // list of source paths to js files
    return gulp
        .src(list)
        .pipe($plumber(gulpConfig.plumber))
        .pipe($if(DEBUG, $sourcemaps.init()))
        .pipe($babel())
        .pipe($if(!DEBUG, $stripComments()))
        .pipe($if(!DEBUG, $uglify()))
        .pipe($iife({
            useStrict: false, // "useStrict" should be already written at the top in all *.js files
            trimCode: false,
            prependSemicolon: false
        }))
        .pipe($concat('app.min.js'))
        .pipe($if(!DEBUG, $javascriptObfuscator({
            config: '.obfuscaterc'
        })))
        .pipe($if(DEBUG, $sourcemaps.write('.')))
        .pipe(gulp.dest(srcConfig.dest.js.scripts))
        .pipe($if(DEBUG && !MOBILE, reload(gulpConfig.reload)));
});

// ... other code

package.json

{
  ...,
  "devDependencies": {
        "@babel/cli": "7.14.5",
        "@babel/core": "7.14.6",
        "@babel/plugin-proposal-optional-chaining": "7.14.5",
        "@babel/preset-env": "7.14.7",
        "@babel/register": "7.14.5",
  
        "babel-eslint": "10.1.0",
  
        "babel-plugin-angularjs-annotate": "0.10.0",
        "babel-plugin-transform-remove-console": "6.9.4",
        "babel-plugin-transform-remove-debugger": "6.9.4",
        ...
        "gulp-autoprefixer": "8.0.0",
        "gulp-babel": "8.0.0",
        "gulp-concat": "2.6.1",
        "gulp-eslint": "6.0.0",
        "gulp-if": "3.0.0",
        "gulp-iife": "0.4.0",
        "gulp-javascript-obfuscator": "1.1.6",
        "gulp-plumber": "1.2.1",
        "gulp-rename": "2.0.0",
        "gulp-run": "1.7.1",
        "gulp-sitemap": "8.0.0",
        "gulp-sourcemaps": "3.0.0",
        "gulp-strip-comments": "2.5.2",
        "gulp-uglify": "3.0.2",
  },
  ...
}