Gulp and Babel: Error: Не удается найти модуль

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. Связывание включает в себя более чем конкатенацию скриптов: каждому модулю требуется закрытие для регистрации экспорта и разрешения содержимого других модулей.

Вместо этого вы должны использовать инструмент для связывания, такой как Browserify, Webpack или Rollup. Вот как можно было бы связать с Browserify (который в этом случае легче полагаться на Babelify преобразование, а не 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/')); 
});