ES6 -使用babel/traceur和jQuery插件

ES6 - Using babel/traceur with jQuery plugins

本文关键字：jQuery 插件 traceur 使用 babel ES6      更新时间：2023-09-26

我希望能够使用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

回答我自己的问题。我做了一些研究，目前看来处理这个问题的最好方法是在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: 

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

我在这里创建的repo也将向您展示如何做到这一点

相关文章：