0

I'm working on a set of projects sitting on GitHub and I want to share the Gulp build pipeline between these. Everything uses Babel, including the Gulp tasks themselves. The common Gulpfile I want to share requires Babel and then all the tasks sitting in a folder - the common file looks like this:

require("babel-core/register");
require("require-dir")("gulp/tasks");

I then tried to package the common pipeline into an NPM package and add it as a devDependency to the other project. Then my gulpfile for the project depending on the common setup looks like this:

require("./node_modules/cratis.client.javascript.setup/gulpfile");

When I run this it seems to load Babel and then starts loading my tasks, but fails immediataly with:

(function (exports, require, module, __filename, __dirname) { import gulp from "gulp";
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:53:16)

Which would indicate Babel didn't load, which I find weird - as I would then expect to see a load error related to the first require.

Couldn't really figure out anything about what was going on here, so I decided to try a different path; Git sub modules. I added the common pipeline project as a Git sub module to the project and included the gulpfile relative to the location of the sub module. This does not seem to work at all - basically not finding files.

What are others doing? I haven't really found any good examples.

If the Git sub module path is the right way, I'd like to see that "node_modules" are shared as well and an easy way to maintain it.

EinarI
  • 627
  • 1
  • 9
  • 14

2 Answers2

0

Probably you forgot to include the Babel depencies in order to have the module import working. Have a look at this project here https://github.com/andreasonny83/mdl-starter-kit You need to npm install --save-dev babel-core babel-loader babel-preset-es2015 and babel-register

andreasonny83
  • 1,213
  • 11
  • 19
  • Nope. They're there. I've tried both implicitly through the NPM package I made, with it having dependencies and also tried directly in the project using the NPM package. Same thing. And it does not say anything about not being able to load the package - I would expect an error there. The setup project works fine, its just the project trying to reuse the pipeline as a package where it doesn't. – EinarI Jun 29 '16 at 08:35
  • So, maybe you just need to enabled the ES2015 transpiler in your .babelrc with: `{ "presets": ["es2015"] }` – andreasonny83 Jun 29 '16 at 08:46
  • Also, this card could be related to http://stackoverflow.com/questions/33604470/unexpected-token-import-in-nodejs5-and-babel so have a look in there as well to find your answer – andreasonny83 Jun 29 '16 at 08:49
  • Thanks for great suggestions. I already have the preset as well. If you want and have the time, I have the project here: https://github.com/Cratis/Client.JavaScript.Core - the Setup project here: https://github.com/Cratis/Client.JavaScript.Setup which is deployed as package here : https://www.npmjs.com/package/cratis.client.javascript.setup. Once you've NPM installed it all and run Gulp, you'll see the problem. – EinarI Jun 29 '16 at 11:59
  • hm, that seems working actually. Let's see if I did it correct. I `git clone https://github.com/Cratis/Client.JavaScript.Setup.git`, then `npm install` and run `gulp`. I'm getting back: `Starting 'watch'...` – andreasonny83 Jun 29 '16 at 12:46
  • That works - but if you do the same for the github.com/Cratis/Client.JavaScript.Core project, you'll get a problem. – EinarI Jun 29 '16 at 13:41
0

Ok, I think I finally discovered the problem. npm dependencies install into the parent project "dependencies" only, not "devDependencies". So, because in your npm cratis.client.javascript.setup you only defined devDependencies, thore will not be installed with npm install from your https://github.com/Cratis/Client.JavaScript.Core project. To fix that, just move all the devDepencies in your cratis.client.javascript.setup under "dependencies".

andreasonny83
  • 1,213
  • 11
  • 19
  • Excellent catch - that gets us one step closer. I'm assuming you tried the Git Submodule approach that I had started. I thought I had checked in that change, but in fact had only pushed the package to NPM with that change. So thanks for seeing that. It is not able to find the tasks - and there is a good explanation. There are two sets of node_modules repositories now and it loads 2 different gulps :) I put in console.log() in index.js of both and it shows it loads both. So it spits out "Task default is not in your gulpfile. Now I just need a parent node_module for them both. Experimenting. – EinarI Jun 29 '16 at 19:49
  • With some moving about - it actually works now, and I got the structure I wanted in the first place as a reward. Basically got rid of the src folder. I'm having a one project per repository policy for my development and don't need it - besides I already had Source and Specifications as folders within that. And now I have a Modules folder for holding Git sub modules. This will reuse the node_modules at the top of hierarchy, since node looks recursively for packages. I'll mark your answer as the solution since you led me down the right path! Really appreciate this, thanks a lot! – EinarI Jun 29 '16 at 20:08