Question

我正在写这样的es6导入：

import $ from 'jquery';
$(document).ready(function(){
    $('body').append($('<p>hello es6 module</p>'));
});

然后我想在浏览器中运行它，所以我只是使用babel将其转换为es5文件，毫无疑问，babel会将其转换为CommonJS文件，所以我安装了babel插件'transform-es2015-modules- amd'，然后我再试一次，但这一次，babel将我的es6代码转换成这种东西：

define(['jquery'], function (_jquery) {.........});

但我只是想把它变成这种东西：

require(['jquery'],function($){......});

所以我怎样才能实现这个梦想，如果你能给我任何建议，我将不胜感激，非常感谢！

Answer 1

您需要一个用于浏览器集成的构建脚本。 gulp对此有好处像这个例子。使用browserify进行浏览器集成。将使用require和import

// gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('build', function () {
  browserify({
    entries: 'index.js',
    extensions: ['.js'],
    debug: true
  })
  .transform(babelify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('dist'));
});

gulp.task('default', ['build']);

index.js中的

使用您想要的源并在浏览器中使用bundle.js输出。

Browserify遍历您的依赖关系树，从index.js
将源文件透明化为ES5
将它们全部捆绑成一个文件
将其发送到dist目录

如果您不想捆绑诸如vendorlibs jquery等所有内容，那么browserify就有一些配置选项。它们允许你在浏览器上使用外部库的ext，我使用的是browserify-global-shim。

<强>结论

npm install --save-dev browserify babelify

可选包

browserify-global-shim

gulp不是必需的，但有助于构建

gulp

如何将es6导入转换为AMD需要

1 个答案: