Gulp and 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"]); 

すべてを1つのファイルに連結され、ビルド時に。 src/の下で私が持っている：

• app.js
• hellojs

app.js

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

hello.js

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

を基本的に node ./build/build.jsを呼び出す

npm start 

：

そして、私はそうのように実行します。

ES6をES5に連結し、bundle.jsにまだhello.jsの要求が含まれているからです。それは連結されているので、それを見つけることはありません。それは可能ですか？

Answer 1

2つのモジュールファイルを連結し、プログラムがES5に転送されても正常に動作することは間違いです。バンドルには、スクリプトを連結する以上のものがあります。各モジュールには、輸出の登録と他のモジュールの内容の解決のための閉鎖が必要です。

代わりに、Browserify、Webpack、Rollupなどのバンドルツールを使用する必要があります。ここで1は（この場合には、むしろgulp-babelよりも変換Babelifyに依存する方が簡単です）Browserifyでバンドルます方法は次のとおりです。

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/')); 
});