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

2019年8月6日 191次阅读

我希望能够使用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未定义.
我检查了代码,看起来它正在将导入变为需求.

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

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

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

最佳答案 在这里回答我自己的问题.我做了一些挖掘,看起来目前处理这个问题的最佳方法是使用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>

我创建的回购here也将向您展示如何做到这一点

点赞