javascript - 在 Javascript 中转换 Model View Controller

Question

我想使用 Gulp、Rollup 和 Babel 将 ES6 应用程序转换为 ES5(使用带 IIFE 的模块显示模式)。

gulp 文件:

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

Controller 导入模型和 View 并转译成功:

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 的应用程序，我想首先将应用程序组合在一起，而不是将所有应用程序组合在一起；

所以我开始:

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