Javascript ES6-将babel/traceur与jQuery插件一起使用_Javascript_Jquery_Gulp_Ecmascript 6_Babeljs

Javascript ES6-将babel/traceur与jQuery插件一起使用

javascript jquery gulp ecmascript-6

Javascript ES6-将babel/traceur与jQuery插件一起使用,javascript,jquery,gulp,ecmascript-6,babeljs,Javascript,Jquery,Gulp,Ecmascript 6,Babeljs,我希望能够使用jQuery插件编写ES6，并使用Gulp Babel将代码编译成ES5，而不必使用Browserify使其工作例如，我可能有这样一个类： import $ from 'jquery'; import somePlugin from 'somePlugin'; class myClass { constructor(options) { this.defaults = { $body: $('body') };

我希望能够使用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时，我在控制台中得到了这个错误：

uncaughtreferenceerror:require未定义

。我检查了代码，看起来它正在将导入转换为需要

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

编辑：我目前也在使用jQuery插件

EDIT2：不，这不是关于RequireJS的-我正在尝试用Babel删除Browserify的用法

回答我自己的问题。我做了一些挖掘，目前处理这个问题的最佳方法似乎是在es6模块加载程序中使用jspm

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:


ES6
系统导入（'app/main'）；

我创建的repo还将向您展示如何实现这一点

RequireJS的可能副本是唯一一个也是模块绑定器的模块系统。在浏览器采用ES6之前，如果没有实现RequireJS，我们需要使用模块绑定器。@rxgx ES6已经处理模块了。正如我所说，我可以使用Babel和Browserify来完成这项工作，但我不想使用Browserify。你应该看看。我不确定你是否理解browserify所扮演的角色。默认情况下，Babel将ES6模块转换为CommonJS模块。CommonJS是Node.js使用的模块系统。浏览器根本没有模块系统。这就是browserify发挥作用的地方。它将模块及其所有依赖项捆绑到一个文件中，该文件可以在浏览器中执行。如果不想使用browserify，则必须转换到不同的模块系统并添加必要的依赖项。（或者没有模块系统，看看它是否有效）。@FelixKling也许不清楚我在写什么，但我确实理解两者所扮演的角色。但我也明白你的意思。感谢您的提示，这可能从理论上回答这个问题，在这里包括答案的基本部分，并提供链接供参考。我已经完成了。但我不打算把一整段代码都扔进stackoverflow。我已经说明了如何使用jspm和es6模块加载器。这是@MathleticsSure的关键部分，但如果你取消回购协议，那么你就没有答案。所以答案应该是独立的。

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