ES6 - 使用 babel/traceur 和 jQuery 插件

Question

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

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

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 插件也能正常工作

EDIT2：不，这与 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:

<head>
    <title>ES6</title>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('app/main');
    </script>
</head>

我创建的 repo here 也会告诉你怎么做

ES6 - 使用 babel/traceur 和 jQuery 插件

ES6 - Using babel/traceur with jQuery plugins

javascript

jquery

ecmascript-6

gulp

babeljs