ES6 – 使用带有jQuery插件的babel / traceur

我希望能够使用jQuery插件编写ES6，并使用Gulp Babel将代码编译为ES5，而无需使用Browserify使其工作。

例如，我可能有这样一个类：

import $ from 'jquery'; import somePlugin from 'somePlugin'; class myClass { constructor(options) { this.defaults = { $body: $('body') }; this.options = $.extend(this.defaults, options); $body.somePlugin(); } } 

如果我使用Babelify，我可以让它工作，但我更愿意找到一种方法，我不必依赖另一个过程。 当我只使用Babel时，我在控制台中收到此错误： Uncaught ReferenceError: require is not defined 。 我检查了代码，看起来它正在将导入变为需求。

有没有办法解决这个问题，还是我必须坚持使用Browserify（Babelify）来编译JavaScript？

编辑：我目前正在使用browserify-shim来使jQuery插件工作

编辑2：不，这不是关于RequireJS – 我试图删除使用Browserify与Babel

Answer 1

在这里回答我自己的问题。 我做了一些挖掘，看起来目前处理这个问题的最佳方法是使用jspm和es6-module-loader。

Gulpfile：

 var gulp = require('gulp'); var del = require('del'); var shell = require('gulp-shell'); gulp.task('clean', function(cb) { del('dist', cb); }); gulp.task('default', ['clean'], shell.task([ 'jspm bundle-sfx app/main -o dist/app.js', './node_modules/.bin/uglifyjs dist/app.js -o dist/app.min.js', './node_modules/.bin/html-dist index.html --remove-all --minify --insert app.min.js -o dist/index.html' ])); 

HTML：

我在这里创建的回购也将告诉你如何做到这一点