使用帶有單個輸出文件和 ES6 模塊的 Babel

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

你不是第一個需要使用Babel將JSX / ES6轉換為ES5而不使用CommonJS模塊以及Browserify / Webpack的人。 不幸的是，事實證明這是不可能的時候（ 1 ， 2 ， 3 ），它看起來像它不會是有史以來可能。 如果你想使用與Babel一起編譯的ES6，你幾乎被迫使用這些工具，但你沒有機會將結果代碼與其他連接/內聯JavaScript一起使用（因為所有那些require()調用而不是window上的全局變量）。 很遺憾巴貝爾不允許改變這種行為。

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 與 include 的作用。require 將拉只在一個文件中一次，並忽略以后對同一文件的調用。Include 將根據使用 include 的次數拉入文件。

所以我要做的是創建 1 個單一的類，稱為“main.js”之類的東西，在那個類中，我把所有的 //=require 注釋放入我的所有代碼中。

然后在我的 gulp 任務中，我需要的唯一源腳本是 main.js，gulp-include 處理其余的。

您仍然可以充分利用 ES6 的大部分功能，只需擺脫使用導入和導出的需要。

這是一個非常簡單的 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;

我的 gulpFile 正在使用 gulp4 和 es6，因為它是節點，設計時環境，不關心那里的 es6 東西，所以導出 gulp 任務很好。