Question

我需要创建使用es6模块编写的bundle。例如：

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

Answer 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做其他魔术，否则你没有在这里展示过。在那种情况下祝你好运：）

Answer 2

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

ES6模块+ Gulp

2 个答案: