ES6 - 使用带有 jQuery 插件的 babel/traceur答案

【问题标题】：ES6 - Using babel/traceur with jQuery pluginsES6 - 使用带有 jQuery 插件的 babel/traceur
【发布时间】：2015-08-11 07:42:03
【问题描述】：

我希望能够使用 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 插件也可以工作

EDIT2：不，这与 RequireJS 无关——我正在尝试通过 Babel 删除 Browserify 的使用

【问题讨论】：

What is the difference between browserify/requirejs modules and ES6 modules的可能重复
RequireJS 是唯一同时也是模块捆绑器的模块系统。在浏览器采用 ES6 之前，如果没有实现 RequireJS，我们需要使用模块捆绑器。
@rxgx ES6 已经处理了模块。正如我所说，我可以使用 Babel 和 Browserify 来完成这项工作，但我宁愿不使用 Browserify。
你应该看看babeljs.io/docs/usage/modules。我不确定您是否了解 browserify 所扮演的角色。 Babel 默认将 ES6 模块转换为 CommonJS 模块。 CommonJS 是 Node.js 使用的模块系统。浏览器根本没有模块系统。这就是 browserify 发挥作用的地方。它将模块及其所有依赖项捆绑到一个可以在浏览器中执行的文件中。如果您不想使用 browserify，则必须转换为不同的模块系统并添加必要的依赖项。（或者没有模块系统，看看它是否有效）。
@FelixKling 也许不清楚我在写什么，但我确实了解两者所扮演的角色。但我也明白你在说什么。感谢您的提示

标签： javascript jquery gulp ecmascript-6 babeljs

【解决方案1】：

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

Gulp 文件：

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 也会告诉你怎么做

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。
我已经完成了。但我不会将整个代码库转储到 stackoverflow 中。我已经说过使用 jspm 和 es6-module-loader。这是必不可少的部分@Mathletics
当然，但是如果你删除了 repo，那么你就没有答案了。所以答案应该是自包含的。