There's a way to handle this without using import at all and using gulp-include instead.
So what you do is you use gulp-include to tell gulp how to include files.
Then in your js files you can do something like this:
//=require views/_*.js //=require views/*.js
So imagine I have a class called BaseView and I put it in a file called _baseView.js. Then I have another class called HomeView in a file valled homeView.js.
HomeView inherits BaseView
So _baseView.js needs to be loaded first.
The line of the require comments above ensures that happens by importing all views that start with _ first and then it imports the rest "note: it won't import the same file more than once, that's what require does vs include. require will pull in a file one time only and ignore future calls to the same file. Include will pull in the file as many times as the include is used.
So what I do is I create 1 single class, called something like "main.js" and in that class I put all the //=require comments to pull in all my code.
Then in my gulp task, the only source script I need is main.js, gulp-include handles the rest.
You can still make full use of most of ES6, just get rid of the need to use Import and Export.
Here's a really simple main.js
"use strict"; (function () { //=require views/_*.js //=require views/*.js })();
And here's a simple gulp 4 task:
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;
My gulpFile is using gulp4 and es6 because it's node, design time environment, don't care about es6 stuff there so exporting the gulp task is fine.
