How to import ES6 module to my js?

[yibhou]

import domready from 'domready';

ERROR: main.js:4Uncaught ReferenceError: require is not defined

who can help me? Thanks~

[sindresorhus]

Support questions are better asked on Stack Overflow: http://stackoverflow.com/questions/tagged/yeoman

[yibhou]

I have solved this problem from gulp docs

[neilhem]

There is also recipe

[isaacalves]

Someone has tweaked the recipe linked above and included error handling, here.

Thanks!

[huguesbrunelle]

I am using generator-webapp 4.0.0-8 and the recipe above need some tweaks so here it is :

From the original recipe, you must install these :

npm install --save-dev browserify babelify vinyl-buffer vinyl-source-stream

Then

// gulpfile.js
const { src, dest, watch, series, parallel, lastRun } = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const browserSync = require('browser-sync');
const del = require('del');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const { argv } = require('yargs');

const browserify = require('browserify');
const babelify = require('babelify');
const buffer = require('vinyl-buffer');
const source = require('vinyl-source-stream');

const $ = gulpLoadPlugins();
const server = browserSync.create();

const port = argv.port || 9000;

const isProd = process.env.NODE_ENV === 'production';
const isTest = process.env.NODE_ENV === 'test';
const isDev = !isProd && !isTest;

function styles() {
  return src('app/styles/*.scss', {
    sourcemaps: !isProd,
  })
    .pipe($.plumber())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    .pipe($.postcss([
      autoprefixer()
    ]))
    .pipe(dest('.tmp/styles', {
      sourcemaps: !isProd,
    }))
    .pipe(server.reload({stream: true}));
};

function scripts() {
  const b = browserify({
    entries: 'app/scripts/main.js',
    transform: babelify,
    debug: true,
    sourcemaps: !isProd,
  })
  return b.bundle()
    .on('error', function(err){
      notifier.notify({
        'title': 'Compile Error',
        'message': err.message
      });
      this.emit('end');
    })
  .pipe(source('main.js'))
  .pipe($.plumber())
  .pipe(buffer())
  .pipe(dest('.tmp/scripts', {
    sourcemaps: !isProd ? '.' : false,
  }))
  .pipe(server.reload({stream: true}));
};

const lintBase = (files, options) => {
  return src(files)
    .pipe($.eslint(options))
    .pipe(server.reload({stream: true, once: true}))
    .pipe($.eslint.format())
    .pipe($.if(!server.active, $.eslint.failAfterError()));
}
function lint() {
  return lintBase('app/scripts/**/*.js', { fix: true })
    .pipe(dest('app/scripts'));
};
function lintTest() {
  return lintBase('test/spec/**/*.js');
};

function html() {
  return src('app/*.html')
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
    .pipe($.if(/\.css$/, $.postcss([cssnano({safe: true, autoprefixer: false})])))
    .pipe($.if(/\.html$/, $.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: {compress: {drop_console: true}},
      processConditionalComments: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    })))
    .pipe(dest('dist'));
}

function images() {
  return src('app/images/**/*', { since: lastRun(images) })
    .pipe($.imagemin())
    .pipe(dest('dist/images'));
};

function fonts() {
  return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
    .pipe($.if(!isProd, dest('.tmp/fonts'), dest('dist/fonts')));
};

function extras() {
  return src([
    'app/*',
    '!app/*.html'
  ], {
    dot: true
  }).pipe(dest('dist'));
};

function clean() {
  return del(['.tmp', 'dist'])
}

function measureSize() {
  return src('dist/**/*')
    .pipe($.size({title: 'build', gzip: true}));
}

const build = series(
  clean,
  parallel(
    lint,
    series(parallel(styles, scripts), html),
    images,
    fonts,
    extras
  ),
  measureSize
);

function startAppServer() {
  server.init({
    notify: false,
    port,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  });

  watch([
    'app/*.html',
    'app/images/**/*',
    '.tmp/fonts/**/*'
  ]).on('change', server.reload);

  watch('app/styles/**/*.scss', styles);
  watch('app/scripts/**/*.js', scripts);
  watch('app/fonts/**/*', fonts);
}

function startTestServer() {
  server.init({
    notify: false,
    port,
    ui: false,
    server: {
      baseDir: 'test',
      routes: {
        '/scripts': '.tmp/scripts',
        '/node_modules': 'node_modules'
      }
    }
  });

  watch('test/index.html').on('change', server.reload);
  watch('app/scripts/**/*.js', scripts);
  watch('test/spec/**/*.js', lintTest);
}

function startDistServer() {
  server.init({
    notify: false,
    port,
    server: {
      baseDir: 'dist',
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  });
}

let serve;
if (isDev) {
  serve = series(clean, parallel(styles, scripts, fonts), startAppServer);
} else if (isTest) {
  serve = series(clean, scripts, startTestServer);
} else if (isProd) {
  serve = series(build, startDistServer);
}

exports.serve = serve;
exports.build = build;
exports.default = build;

// package.json
{
  "private": true,
  "engines": {
    "node": ">=4"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.5.1",
    "babelify": "^10.0.0",
    "browser-sync": "^2.26.5",
    "browserify": "^17.0.0",
    "chai": "^4.2.0",
    "cross-env": "^5.2.0",
    "cssnano": "^4.1.10",
    "del": "^4.1.1",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-cli": "^2.2.0",
    "gulp-eslint": "^5.0.0",
    "gulp-filter": "^6.0.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^6.0.0",
    "gulp-load-plugins": "^1.6.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-size": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^3.1.6",
    "mocha": "^6.2.3",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
    "webpack-stream": "^6.1.1",
    "yargs": "13.2.4"
  },
  "scripts": {
    "serve:test": "cross-env NODE_ENV=test gulp serve",
    "serve:dist": "cross-env NODE_ENV=production gulp serve",
    "start": "gulp serve",
    "build": "cross-env NODE_ENV=production gulp",
    "test": "npm run serve:test",
    "tasks": "gulp --tasks"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "Firefox ESR"
  ],
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
    },
    "env": {
      "es6": true,
      "node": true,
      "browser": true
    },
    "rules": {
      "quotes": [
        2,
        "single"
      ]
    }
  }
}

[silvenon]

@huguesbrunelle could you point out the difference from the recipe and explain what you think works in your example that doesn't in the recipe?

[silvenon]

I accidentally reopened, so I'm closing. I'll reopen again for real once we prove that there's an issue.

[huguesbrunelle]

@silvenon
Inspired from the recipe above, here is the update I made in the original generator-webapp 4.0.0-8 gulpfile.js in order to support ES6 :

const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const { argv } = require('yargs');
+ const notifier = require('node-notifier');
+ const browserify = require('browserify');
+ const babelify = require('babelify');
+ const buffer = require('vinyl-buffer');
+ const source = require('vinyl-source-stream');

const $ = gulpLoadPlugins();
const server = browserSync.create();

...

 function scripts() {
-  return src('app/scripts/**/*.js', {
+  const b = browserify({
+    entries: 'app/scripts/main.js',
+    transform: babelify,
+    debug: true,
     sourcemaps: !isProd,
   })
-    .pipe($.plumber())
-    .pipe($.babel())
-    .pipe(dest('.tmp/scripts', {
-      sourcemaps: !isProd ? '.' : false,
-    }))
-    .pipe(server.reload({stream: true}));
+  return b.bundle()
+    .on('error', function(err){
+      notifier.notify({
+        title: 'Compile Error',
+        message: err.message
+      });
+      this.emit('end');
+    })
+  .pipe(source('main.js'))
+  .pipe($.plumber())
+  .pipe(buffer())
+  .pipe(dest('.tmp/scripts', {
+    sourcemaps: !isProd ? '.' : false,
+  }))
+  .pipe(server.reload({stream: true}));
 };

package.json looks like :

    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.5.1",
+  "babelify": "^10.0.0",
    "browser-sync": "^2.26.5",
+  "browserify": "^17.0.0",
    "chai": "^4.2.0",
    "cross-env": "^5.2.0",
    "cssnano": "^4.1.10",

...

    "gulp-useref": "^3.1.6",
    "mkdirp": "^0.5.1",
    "mocha": "^6.2.3",
+  "node-notifier": "^9.0.0",
+  "vinyl-buffer": "^1.0.1",
+  "vinyl-source-stream": "^2.0.0",
+  "webpack-stream": "^6.1.1",
    "yargs": "13.2.4"
  },
  "scripts": {

...

  ],
  "eslintConfig": {
    "parserOptions": {
+    "ecmaVersion": 6,
      "sourceType": "module"
    },
    "env": {