时间戳

首页 > 解决方案 > 对从外部 javascript 引用的 ES6 代码使用 gulp+browserify+babalify。

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

问题描述

我一直在使用 es6 类、导入和导出为我们的主项目做一个辅助项目。主要代码使用Angular 1（即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"

不起作用，因为它将引用的完整字符串视为文件名/模块。

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

gulp.task('cli', cliCompile);

标签： javascriptgulpbrowserify

解决方案

别名确实可以解决这个问题。但是，当您将 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'));

推荐阅读