TransPile Model View Controler in Javascript

Question

Ich möchte Gulp, Rollup und Babel verwenden, um ES6-Anwendung auf ES5 zu transponieren (die das Modulmuster mit IIFE verwenden).

Die schluck Datei:

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/')); 
}); 

Der Controller Importmodell und Ansicht und transpiled ok:

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)); 

Das Problem, das ich habe, ist, wenn ich zusammenfassen möchten (zur Vermeidung von Kollision) wie das funktioniert nicht:

(function() { var model = function() { ... }() 
var view = function() { ... }() 
var controller = function (model, view) { 
    ...... 
}(model, view))}() 

Ich habe mehrere App, die MVC enthält und ich möchte zuerst zu grou p und app zusammen als Gruppe alle app; So

ich anfangen:

js 
app1 
- model.js 
- view.js 
- controller.js 
app2 
- model.js 
- view.js 
- controller.js 
app3 
- model.js 
- view.js 
- controller.js 

Nach der Task laufen ich haben will, die nicht kollidieren:

js 
    app1.js 
    app2.js 
    app3.js 

Answer 1

Ich habe teilweise Arbeitsbeispiel aus den rollup-stream in github Team/Anwender, funktioniert aber nur für eine App (und nicht genau als MVC transpiliert), nicht mit mehreren 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's 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')); 
}); 

Answer 2

können Sie statische Variable verwenden. So erstellen Sie Modell, Ansicht und Controller als statische Variable.

function a_project() { 
} 
a_project.model = function(){}; 
a_project.view = function(){}; 
a_project.controller = function(){}; 

var myInstance = new MyClass(); 

Dies wird Ihnen helfen, Modell, Ansicht und Controller-Variable aufzurufen.

Answer 3

würde dies helfen? Ich denke, erstellen Aufgaben für jede App, die Sie vor Gruppe erwähnt zusammen es transpile 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's 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