对从外部 javascript 引用的 ES6 代码使用 gulp+browserify+babalify。

Question

我一直在使用 es6 类进行主要项目的副项目，导入和导出。主要代码使用Angular1（即AngularJS）

我遵循了这里和其他地方关于使用 browsify 和 babelify 的建议，几乎已经开始工作了，但我仍然坚持我希望的最后一步。我无法从主代码引用我的库。

我们使用 gulp，所以我需要将其融入该框架。我想出了以下内容来创建库：

function cliCompile() {
    console.log('Compiling client-server...');
    return browserify({
        entries: 'cli/main.js',
        debug: true,
        require: './cli/main.js',
        transform: [babelify]})
        .bundle()
        .pipe(source('cli.js'))
        .pipe(gulp.dest('./app/compiled'));
}

由此生成的要求对我的计算机（完整路径）是唯一的，所以我显然需要使用别名。但是，别名似乎不适用于上述内容，或者我不知道正确的格式。将要求行更改为

require: 'cli/main.js:CSMain"

没有工作，因为它将完整的引用字符串视为 filename/module.

有没有办法重写它以便它可以工作并有一个我可以在主要 angular 代码中引用的别名？请注意，引用我上面给出的函数的行是：

gulp.task('cli', cliCompile);

Answer 1

别名确实解决了这个问题。但是，当您将 require 作为初始参数的一部分传递时，您似乎无法指定 require 选项。

改为调用 .require 如下：

gulp.task('cli', cliCompile);
....
function cliCompile() {
    console.log('Compiling client-server...');

    var b = browserify({
        entries: 'cli/main.js',
        debug: true,
        transform: [babelify]});
    b.require('./cli/main.js', {expose: 'cli'});
    return b.bundle()
        .pipe(source('cli.js'))
        .pipe(gulp.dest('./app/compiled'));
}

也可以将要求放在列表中：

return browserify({
        entries: 'cli/main.js',
        debug: true,
        transform: [babelify]})
            .require('./cli/main.js', {expose: 'cli'})
            .bundle()
            .pipe(source('cli.js'))
            .pipe(gulp.dest('./app/compiled'));

对从外部 javascript 引用的 ES6 代码使用 gulp+browserify+babalify。

Use of gulp+browserify+babalify for ES6 code referenced from external javascript.

javascript

browserify

gulp