feat(gulp-tasks): add support to es6 modules, fixes #7

Author: Walker Leite

template/gulp-tasks/build.js

@@ -6,12 +6,13 @@ import path from 'path';
 import browserify from 'browserify';
 import vueify from 'vueify';
 import babelify from 'babelify';
+import tfilter from 'tfilter';
 import modulesify from 'css-modulesify';
 import aliasify from 'aliasify';
 import source from 'vinyl-source-stream';
 import buffer from 'vinyl-buffer';
 import {argv} from 'yargs';
-import {dirs} from './config';
+import {dirs, extended} from './config';
 import {customSass} from './compilers';
 
 gulp.task('build:test', () => gulp.src([
@@ -24,6 +25,12 @@ gulp.task('build:test', () => gulp.src([
   .pipe(gulp.dest(dirs.buildTest)));
 
 gulp.task('build:client', ['copy:client', 'copy:config:server'], () => {
+  // Node modules to be included in babel transpilation
+  //  Use this with ES6 modules for example
+  const bModules = [];
+
+  if (extended) bModules.push('bootstrap-vue/es');
+
   vueify.compiler.applyConfig({
     sass: {
       includePaths: [
@@ -36,13 +43,49 @@ gulp.task('build:client', ['copy:client', 'copy:config:server'], () => {
   });
 
   const b = browserify({
-    entries: path.resolve(dirs.srcClient, 'main.js'),
+    entries: [
+      path.resolve(dirs.srcClient, 'main.js'),
+      ...bModules.map(mod => path.resolve(dirs.modules, mod)),
+    ],
     debug: true,
   });
 
+  // Transpile .vue
   b.transform(vueify);
 
-  b.transform(babelify, {plugins: ['transform-runtime']});
+  // Babel Settings with module filter
+  const bSettings = {
+    plugins: ['transform-runtime'],
+  };
+
+  b.transform(tfilter(
+    babelify,
+    {
+      filter: (filename) => {
+        const exception = bModules.some(
+          mod => filename.includes(
+            path.resolve(dirs.modules, mod)
+          )
+        );
+        if (exception) {
+          // node module
+          // console.log('Transpiling module', filename);
+          return true;
+        } else if (!filename.includes(dirs.modules)) {
+          // filter not in node_modules
+          // console.log('Transpiling src', filename);
+          return true;
+        }
+        // console.log('NOT transpiling', filename);
+        return false;
+      },
+    },
+    {
+      ...bSettings,
+      global: true,
+      presets: ['env'],
+    }
+  ));
 
   b.plugin(modulesify, {
     output: path.resolve(

template/gulp-tasks/config.js

@@ -1,5 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import path from 'path';
+import pkg from '../package.json';
+
+// true if this template was generated with extended option
+export const extended = pkg.extended || false;
 
 export const dirs = {};
 dirs.root = path.resolve(__dirname, '../');

template/package.json

@@ -78,6 +78,7 @@
     "loopback-chai": "^2.3.0",
     "mocha": "^3.4.2",
     "sinon": "^2.3.8",
+    "tfilter": "^1.0.1",
     "through2": "^2.0.3",
     "tmp": "0.0.33",
     "vinyl-buffer": "^1.0.0",
@@ -96,5 +97,7 @@
     "url": ""
   },
   "license": "UNLICENSED",
-  "description": "{{ description }}"
+  "description": "{{ description }}"{{#extended}},
+  "extended": true
+  {{/extended}}
 }