javascript - Gulp and Babel: Error: Cannot find module -
i have project i've set using gulp , babel. working fine, except when create module , import once it's converted es6 es6 doesn't work. error:
error: cannot find module 'hello.js' @ function.module._resolvefilename (module.js:440:15) @ function.module._load (module.js:388:25) @ module.require (module.js:468:17) here's gulpfile.babel.js:
import gulp "gulp"; import babel "gulp-babel" import concat "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"]); during build concatenated 1 file. under src/ have:
- app.js
- hellojs
app.js
import hello './hello.js' console.log(hello()); hello.js
export default () => { return 'hey hello.js'; }; and run so:
npm start which calls node ./build/build.js.
i think it's because it's concatenating es6 es5 , bundle.js still contains require hello.js. wont find though because concatenated. possible?
it incorrect concatenate 2 module files , expect program work properly, when transpiled es5. bundling involves more concatenating scripts: each module needs closure registering exports , resolving contents of other modules.
you must instead use bundling tool such browserify, webpack or rollup. here's how 1 bundle browserify (which in case, easier rely on babelify transform rather 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/')); }); 