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

Question

这是我的 gulp 任务，用于将我的 ES6 代码编译成单个 ES5 文件。我在 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。

结果是一堆 "Error: Cannot find module" 错误。当所有模块都保存在单个文件中时，如何编译可以正常工作的模块？

Answer 1

您可能需要 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 2

您不是第一个需要使用 Babel 将 JSX/ES6 转译为 ES5 但不使用 CommonJS 模块的人，因此 Browserify/Webpack。不幸的是，事实证明这在当时是不可能的 (, , 3)，而且看起来永远不可能。如果你想使用通过 Babel 转译的 ES6，你几乎不得不使用这些工具，但你将没有机会将生成的代码与其他 concatenated/inline JavaScript 一起使用（因为所有这些require() 在 window 上调用而不是全局变量）。很遗憾 Babel 不允许更改此行为。

Answer 3

有一种方法可以在不使用导入的情况下使用 gulp-include 代替。

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

然后在你的 js 文件中你可以这样做：

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

所以假设我有一个名为 BaseView 的 class，我将它放在一个名为 _baseView.js 的文件中。然后我在一个名为 homeView.js.

的文件中有另一个名为 HomeView 的 class

HomeView继承BaseView

所以_baseView.js需要先加载

上面的 require 注释行通过首先导入所有以 _ 开头的视图然后导入其余视图来确保发生这种情况“注意：它不会多次导入同一个文件，这就是 require 与include.require 只会拉入一个文件一次，而忽略以后对同一文件的调用。include 会在使用 include 时多次拉入文件。

所以我所做的是创建 1 个单曲 class，名称类似于 "main.js"，在那个 class 中，我将所有 //=require 注释放入我所有的代码。

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

你仍然可以充分利用 ES6 的大部分功能，只是摆脱了使用 Import 和 Export 的需要。

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

"use strict";

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

这是一个简单的 gulp 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;

我的 gulp 文件使用 gulp4 和 es6，因为它是节点，设计时环境，不关心那里的 es6 东西，所以导出 gulp 任务没问题。

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

Using Babel with a single output file and ES6 modules

javascript

ecmascript-5

ecmascript-6

babeljs