Gulp和Babel：錯誤：找不到模塊

Question

我有一個使用gulp和babel設置的項目。 一切工作正常，除非當我創建一個模塊並將其從ES6轉換為ES6並將其導入時，否則將無法正常工作。 我收到一個錯誤：

Error: Cannot find module 'hello.js'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)

這是我的gulpfile.babel.js ：

import gulp from "gulp";
import babel from "gulp-babel"
import concat from "gulp-concat"

const dirs = {
  src: "src",
  dest: "build"
}

gulp.task("build", () => {
  return gulp.src(dirs.src + "/**/*.js")
         .pipe(babel())
         .pipe(concat("build.js"))
         .pipe(gulp.dest(dirs.dest))
});

gulp.task("default", ["build"]);

在構建過程中，所有內容都連接到一個文件中。 在src/我有：

• app.js
• hellojs

app.js

import hello from './hello.js'
console.log(hello());

hello.js

export default () => {
    return 'Hey from hello.js';
};

我這樣跑：

npm start

基本上調用node ./build/build.js 。

我認為這是因為它將ES6連接到ES5，並且bundle.js仍然包含hello.js 。 它不會找到它，因為它是串聯的。 那可能嗎？

Answer 1

串聯兩個模塊文件並期望程序正常運行是不正確的，即使將其編譯到ES5中也是如此。 捆綁不僅涉及串聯腳本：每個模塊都需要一個閉包來注冊出口並解析其他模塊的內容。

相反，您必須使用捆綁工具，例如Br​​owserify，Webpack或Rollup。 這是與Browserify捆綁在一起的方式（在這種情況下，依賴Babelify變換比gulp gulp-babel更容易）：

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var babelify = require('babelify');

gulp.task('browserify', function() {
    return browserify({
         entries: './src/app.js'
        })
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./build/'));
});