Transpile Model View Controller in Javascript
I want to use Gulp, Rollup and Babel to port my ES6 application to ES5 (which uses the IIFE module display pattern).
Gulp file:
var gulp = require('gulp');
var rollup = require('gulp-better-rollup');
var babel = require('rollup-plugin-babel');
gulp.task('roll', function () {
return gulp.src('_01_src/js/form/*.js')
.pipe(rollup(
{plugins: [babel({presets: ['es2015-rollup']})]},
{format: 'iife',}
)
)
.pipe(gulp.dest('_02_build/js/form/'));
});
The import and view controller model and passed in the order:
var controller = (function (model) {
'use strict';
model = 'default' in model ? model['default'] : model;
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var Cat = function Cat(name) {
classCallCheck(this, Cat);
this.name = name;
};
return Cat;
}(model));
The problem I am facing is when I want to merge (to avoid collision), how this does not work:
( function() { var model = function () { ... }()
var view = function () { ... }()
var controller = function (model, view) {
......
}(model, view) )}()
I have several applications that contain MVC and I want to group and pin together first than group all applications;
So, I start:
js
app1
- model.js
- view.js
- controller.js
app2
- model.js
- view.js
- controller.js
app3
- model.js
- view.js
- controller.js
After starting the task, I want to have, which does not collide:
js
app1.js
app2.js
app3.js
+3
source to share
3 answers
I have a partial working example from rollup-stream at github team / users, but only works for an app (not exactly redrawn as MVC), not multiple apps.
const gulp = require('gulp');
const scss = require('gulp-sass');
const babel = require('gulp-babel');
const watch = require('gulp-watch');
const autopre = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const rollup = require('rollup-stream');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
gulp.task('rollup', function () {
return rollup({
entry: '_01_src/js/form/app.js',
format: 'iife',
})
// turn the raw text stream into a stream containing one streaming Vinyl file.
.pipe(source('form.js'))
// buffer that file contents. most gulp plugins don't support streaming files.
.pipe(buffer())
// transform the files.
.pipe(babel({
presets: ['es2015']
}))
// and output to _02_build/js/form.js as normal.
.pipe(gulp.dest('_02_build/js'));
});
0
source to share
will it help? I think I create tasks for each app you mentioned before the group together, it converts OK
const path = require('path')
const fs = require('fs-extra')
const gulp = require('gulp')
const rollup = require('gulp-better-rollup')
const babel = require('rollup-plugin-babel');
// suppose your project looks like
// --project
// | +-gulpfile.js
// | +-src
// | | +-app1
// | | | +-controller.js
// | | | +-model.js
// | | | +-view.js
// | | +-app2
// the target path where your apps locates,
var targetPath = path.join(__dirname, 'src')
// files will build into
var destTargetPath = path.join(__dirname, 'dest')
// find app1,app2.... and exclude node_modules
var dirs = fs.readdirSync(targetPath).filter((filename) => {
if (filename === 'node_modules') return false
var stat = fs.statSync(path.join(targetPath, filename))
return stat.isDirectory()
})
// I want a task name for each app
var dir2task = dir => 'x_' + dir
// add tasks for each app
dirs.forEach((dir) => {
// as it worked for single app
gulp.task(dir2task(dir), () => {
//this return means tells gulp when job is done
return gulp.src(path.join(targetPath, dir) + '/**/*.js')
.pipe(rollup({
plugins: [babel({
presets: ['es2015-rollup']
})]
}, {
format: 'iife',
}))
.pipe(gulp.dest(path.join(destTargetPath, dir)))
})
})
// run them all and after all apps built,and copy or rename your built controller to appx.js, there no need for return, my mistake
gulp.task('default', dirs.map(dir2task), () => {
dirs.forEach((dir) => {
fs.copySync(path.join(destTargetPath, dir, 'controller.js'), path.join(destTargetPath, dir + '.js'))
})
})
// result will be
// --project
// | +-gulpfile.js
// | +-src
// | | +-app1
// | | +-....
// | +-dist
// | | +-app1.js
// | | +-app2.js
0
source to share
You can use a static variable. Here's how to make the model, view and controller static variable.
function a_project () {
}
a_project.model = function(){};
a_project.view = function(){};
a_project.controller = function(){};
var myInstance = new MyClass();
This will help you call the model, view and controller variable.
-1
user8214535
source
to share