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

How to transform the es6 import to AMD require

本文关键字：AMD 需要 转换 导入 es6      更新时间：2023-09-26

我正在写这样的es6导入：

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

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

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

但我只想把它变成这样的东西：

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

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

您需要一个用于浏览器集成的构建脚本。大口喝对那太好了就像这个例子一样。使用browsrify进行浏览器集成。将与需求和导入一起工作

//gullfile.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目录

如果你不想像vendorlibsjquery这样捆绑所有东西，那么browserfy有一些配置选项。它们允许您在外部libs-ext上使用require进行浏览。我使用的是浏览全局填充程序。

结论：

npm install --save-dev browserify babelify

可选包装

browserify-global-shim

不需要吞咽，但有助于构建

gulp
相关文章：