контекст не определен в IIFE после объединения gulp и uglify

#javascript #gulp #iife

#javascript #gulp #iife

Вопрос:

У меня есть файл myFile.js с простым IIFE в нем:

 (function() {
    console.log(this);       // this is the window object
})()
  

Я использую gulp с browserify, babel и uglify для обработки файла и создания версии dist, которая включена тегом HTML script:

 // gulp build task
function build() {
    let fileUploaderBundle = browserify('./js/myFile.js', { debug: true })
        .transform(babel.configure({
            presets: ['@babel/env']
        }));

    return fileUploaderBundle
        .bundle()
        .on('error', (error) => {
            console.error(error); this.emit('end');
        })
        .pipe(source('myFile.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(dest('./dist/js'));
};
  

в HTML:

 <script type="text/javascript" src="dist/js/myFile.js"></script>
  

но тогда dist/js/myFile.js регистрирует undefined вместо регистрации объекта window… Я что-то упускаю?

Комментарии:

1. Использует ли dist use strict ?

2. да, вы правы… Я не знаю, откуда это взялось, но что-то в процессе добавилось use strict

3. есть идеи о том, на каком шаге это добавляется?

4. Я погуглил, но не нашел ничего конкретного, к сожалению, недостаточно знаю о процессе сборки, но вы могли бы разобраться в этом, удаляя вызовы до тех пор, пока use strict не исчезнет, чтобы сузить источник

5. Погуглив, я вижу, что у людей возникают проблемы с добавлением одной области кода use strict за пределами объявления функции, и объединение файлов заканчивается перемещением его в глобальную область вместо того, чтобы просто ограничиваться файлом, в котором он был написан (потому что строка не ограничивалась ничем, кроме файла JS). Рекомендация состоит в том, чтобы добавлять use strict только внутри функции (которая может быть IIFE), чтобы сохранить область видимости там, где вы этого хотите.