ES6 modules + Gulp

ES6 modules + Gulp

本文关键字：Gulp modules ES6      更新时间：2023-09-26

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

import Api from 'api';
function Loader(){
   // some code that user api
};
export default Loader;

通过gull-es6-模块传输程序开发转换为AMD的版本，并与RequireJS配合良好。但我找不到从中构建捆绑包的方法。我尝试过使用gull-es6-模块传输程序和gull-browsrify:

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

据我所知，Browserify确实接受add/request方法中的流。我不确定这一饮而尽是否会产生真正的效果。然而，坦率地说，当你可以直接调用browserifyAPI来产生结果时，为什么要在那里使用gullow？

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

当然，除非你在用咕噜做其他你没有在这里展示过的魔术。在这种情况下，祝你好运：）

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

相关文章：