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

这会有帮助吗？我认为为每个应用程序创建任务，你在组合之前提到过它可以正常运行

＆＃13;

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

＆＃13;

Answer 2

我有来自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 3

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

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

var myInstance = new MyClass();

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

Javascript

3 个答案: