Babel 7 equivalent of babel-register?

Question

I am learning how to use Webpack 4 by building a Webpack 4 & Gulp 4 boilerplate. Gulp to handle Sass etc and Webpack to handle the JS.

The tutorial I followed gave me this command to run for the build process:

NODE_ENV=production gulp build --require babel-register --gulpfile tasks

And that makes sense, however, the tutorial I was following had Babel 6 in the example. I have upgraded my project to Babel 7 using @babel/core and @babel/preset-env instead of babel-core and babel-preset-env.

However, this means that the --require babel-register portion of the build command no longer works. What would be the workaround to get Babel 7 to compile my Gulp/Wepback files so I can continue to use import gulp from 'gulp'.

Excuse the poor terminology and poor explanation, I've been in Gulp 4 alone for so long, it's like starting again!

Answer 1

---

Update 17/04/2019

After forking the tutorial and updating all the packages I have it working with the changes listed in this pull request

https://github.com/PascalAOMS/gulp4-webpack/pull/1

---

Original Post 06/04/2019

I am working through what sounds like a similar tutorial (https://css-tricks.com/combine-webpack-gulp-4/ and was hitting a similar issue - the first time it hits an import statement it complains.

I made a fresh repository to just get the import statements working (ignoring the webpack stuff for the moment) and got them working with @babel/register in this repository working from this documentation.

I tried putting it into the node script definition using the --require flag though it doesn't seem to like it (I'll fiddle around some more) but what got it working for me

// package.json
{
  ...
  "scripts": {
    "use_import": "gulp --gulpfile tasks"
  },
  "author": "Marc Vousden",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/register": "^7.4.0",
    "@babel/preset-env": "^7.4.3"
    "gulp": "^4.0.0"
  }
}

// index.js
require('@babel/register');

const subtask = require('./subtask').default;

exports.default = (cb)=>{
  console.log("loaded index")
  subtask()
  cb()
}

• At the top of the gulpfile (in my case tasks/index) use require("@babel/register") This should make babel process other require statements so that import works
• Use require statements to get scripts that use import statements inside them It seems that the require statement returns an object with a key/value pair for the default export so I had to pop .default on the end

I'm still working through things so I will update if I get the whole process working but for now it might get you a little further down the track.

(also - I completely forgot to add a .babelrc file in my panic for a while)