如何从 browserify/babelify 导出全局变量以在没有 browserify 的项目中使用？

Question

场景：

我有 2 个设置完全不同的项目：

1. 常规网站，带有简单 gulp 设置的遗留代码

2. 小宠物项目。在 ES6 类的帮助下编写的 JS 滑块插件（用 babel 编译）。 JS gulp 任务：

   gulp.task('js', function() {
   return gulp.src('src/scripts/*.js')
   .pipe($.plumber())
   .pipe(through2.obj(function (file, enc, next) {
       browserify(file.path, { debug: true })
       .transform(require('babelify'))
       .transform(require('debowerify'))
       .bundle(function (err, res) {
           if (err) { return next(err); }
           file.contents = res;
           next(null, file);
       });
   }))
   .on('error', function (error) {
       console.log(error.stack);
       this.emit('end')
   })
   .pipe( $.rename('alder.js'))
   .pipe( gulp.dest('dist/scripts/'));
   

   });

我想达到什么目标？

我希望能够在这个常规网站中使用 browserify/babelify 输出的文件（无需设置整个 browserify/babelify 的东西）。

问题

当然，browserify / babelify 做了一些神奇的事情，最后将变量包装到函数作用域中，从而隐藏了这个变量/构造函数。所以问题是导出可以在其他项目中使用的全局变量/构造函数的正确方法是什么？此时我唯一想到的就是将我的函数附加到窗口对象上，例如：

    class Alder { // constructor and then methods }
    export default Alder;
    window['Alder'] = Alder

还有其他想法吗？

Answer 1

设置standalone 选项：

当opts.standalone 是非空字符串时，将使用该名称和umd 包装器创建一个独立模块。您可以在独立全局导出中使用命名空间，使用字符串名称中的. 作为分隔符，例如'A.B.C'。全局导出为sanitized and camel cased。