Question

这是将我的ES6代码编译成单个ES5文件的gulp任务。我在ES6中使用了类和模块（import，export）。

  gulp.src(paths.scripts)
        .pipe(sourcemaps.init())
        .pipe(babel({
          presets: ['es2015']
         }))
        .pipe(concat('all.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./www/js'));

但是，因为Babel将ES6 import指令编译成require命令，并且require将尝试请求文件，所以请求文件失败，因为所有ES5代码都连接成一个文件，all.js.

结果是一堆“错误：无法找到模块”错误。如何编译在单个文件中保存的模块？

Answer 1

你并不是第一个需要将Babix的JSX / ES6转换为ES5而不使用CommonJS模块而不使用Browserify / Webpack的人。不幸的是，事实证明这是不可能的（1，2，3），看起来它永远不可能实现。如果你想使用与Babel一起编译的ES6，你几乎被迫使用这些工具，但是你没有机会将结果代码与其他连接/内联JavaScript一起使用（因为所有这些{{因为所有这些{{ 1}}调用而不是require()上的全局变量。可惜巴贝尔不允许改变这种行为。

Answer 2

您可能需要使用Browserify才能使用gulp：

    browserify('./js/script.js', { debug: true })
      .add(require.resolve('babel-polyfill'))
      .transform(babelify.configure({presets: ['es2015']}))
      .bundle()
      .on('error', util.log.bind(util, 'Browserify Error'))
      .pipe(source('all.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify({ mangle: false }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./www/js'));

例如： https://github.com/glued/harp-babel/blob/babel-gulp-v6/gulpfile.babel.js

Answer 3

有一种方法可以完全不使用import而是使用gulp-include来处理此问题。

所以您要做的是使用gulp-include告诉gulp如何包含文件。

然后在您的js文件中，您可以执行以下操作：

//=require views/_*.js
//=require views/*.js

因此，想象一下我有一个名为BaseView的类，并将其放在了名为_baseView.js的文件中。然后，在一个名为homeView.js的文件中，还有另一个名为HomeView的类。

HomeView继承了BaseView

因此，必须先加载_baseView.js。

上面的require注释这一行通过先导入以_开头的所有视图，然后再导入其余的视图来确保这种情况的发生”，请注意：它不会一次导入同一文件，这就是require vs include的内容。 require将仅一次拉入一个文件，而忽略以后对同一文件的调用。include将拉入该文件的次数与使用include的次数相同。

所以我要做的是创建一个单一的类，称为“ main.js”，然后在该类中放置所有// == require注释以提取所有代码。

然后在我的gulp任务中，我唯一需要的源脚本是main.js，gulp-include会处理其余的脚本。

您仍然可以充分利用大多数ES6，而无需使用导入和导出。

这是一个非常简单的main.js

"use strict";

(function () {
    //=require views/_*.js
    //=require views/*.js
})();

这是一个简单的任务4：

function demoScripts() {
    var ret = src([
            path.join(paths.srcDemoJs, 'main.js')
        ])
        .pipe(include({
            hardFail: true,
            includePaths: [
                paths.stage,
                path.join(paths.srcDemoJs)
            ]            
        }))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(dest(paths.dstDemo));
        return ret;
}

exports.build = demoScripts;

我的gulpFile使用的是gulp4和es6，因为它是节点，设计时环境，不在乎es6，因此导出gulp任务就可以了。

将Babel与单个输出文件和ES6模块一起使用

3 个答案: