使用Javascript发送模型视图控制器

Question

我想使用Gulp，Rollup和Babel将ES6应用程序转换为ES5（使用IIFE模块显示模式）。

的一饮而尽文件：

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

控制器导入模型和视图，并transpiled确定：

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

我已经是当我想要组合在一起的问题（避免碰撞）像这样不工作：

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

我有多个应用程序，其中包含MVC，我想第一次群p和app一起比组所有应用程序;

于是我开始：

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

后任务来看，我想有，这不冲突：

js 
    app1.js 
    app2.js 
    app3.js 

Answer 1

我从rollup-stream in github团队/用户的部分工作示例，但只适用于一个应用程序（而不是正确地转换为MVC），而不是多个应用程序。

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

可以使用静态变量。 下面介绍如何将模型，视图和控制器设置为静态变量。

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

var myInstance = new MyClass(); 

这将帮助您调用模型，视图和控制器变量。

Answer 3

这会帮助吗？我想为每个应用创建任务，组在一起就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