Javascript 中的 Transpile 模型视图控制器

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

控制器导入模型和视图并转译成功：

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

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

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

var myInstance = new MyClass();

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

Answer 2

这会有帮助吗？我想为每个应用程序创建任务，你之前提到过将它组合在一起转译 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

Answer 3

我有来自 rollup-stream in github team/users 的部分工作示例，但仅适用于一个应用程序（并没有完全转换为 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'));
});

Javascript 中的 Transpile 模型视图控制器

Transpile Model View Controller in Javascript

javascript

ecmascript-6

gulp

babeljs

rollupjs