ES6 模块 + Gulp答案

【问题标题】：ES6 modules + GulpES6 模块 + Gulp
【发布时间】：2014-10-08 16:39:54
【问题描述】：

我需要创建捆绑包，使用 es6 模块编写的应用程序。示例：

import Api from 'api';

function Loader(){
   // some code that user api
};

export default Loader;

开发版本通过 gulp-es6-module-transpiler 转换为 AMD 并与 RequireJS 配合使用。但是我找不到从这里构建捆绑包的方法。我尝试使用 gulp-es6-module-transpiler 和 gulp-browserify：

gulp.task('build_js', function() {
   gulp.src('app/**/*.jsx')
    .pipe(gulp_react({errLogToConsole: true}))
    .pipe(transpiler({
        type: 'cjs'
    }))
    .pipe(gulp.dest('./' + build_fld + '/'));
});

gulp.task('brow', ['build_js'] function(){
   gulp.src('dist/auto-name.js')
    .pipe(browserify())
    .pipe(gulp.dest('./' + build_fld + '/'));
});

但我的 Browserify 有错误：

Error: module 'name' not found from 'd:\\Work\\lib.react-suggest\\dist\\fake_32525252.js';

但通常这是不好的方式，因为据我了解 browserify 不支持乙烯基流，它需要首先使用 CommonJS 模块构建 js 文件，然后使用 Browserify。

也许我理解错了，它可以从一个流构建？还有哪些可能的解决方案？因此，我希望 AMD 用于开发，CommonJS 或 Global 用于生产。

我拥有的应用程序文件结构：

/app
   -app.jsx
   -component1.jsx
   -component2.jsx
   -index.html
/.tmp
/dist
gulpfile.js

我想要的结果：

/app
   -app.jsx
   -component1.jsx
   -component2.jsx
   -index.html
/.tmp
  -app.js
  -component1.js
  -component2.js
  -index.html
/dist
  -app.min.js
gulpfile.js

【问题讨论】：

标签： javascript gulp browserify

【解决方案1】：

据我所知，Browserify 确实接受 add/require 方法中的流。我不确定 gulp 调用是否会产生真正的流。但是坦率地说，当您可以直接调用 browserify api 产生结果时，为什么还要在那里使用 gulp？

var b = browserify();
b.add('dist/auto-name.js');
b.bundle().pipe(gulp.dest('./' + build_fld + '/'));

当然，除非你正在使用 Gulp 做一些其他你没有在这里展示的魔法。在那种情况下祝你好运:)

【讨论】：

【解决方案2】：

您可以使用 0.2.0 版本的 gulp-es6-module-transpiler。它支持bundle 和commonjs 格式化程序，因此构建捆绑包应该不是问题。至于 AMD，你可以使用es6-module-transpiler-amd-formatter 模块。

【讨论】：