如何将 es6 导入转换为 AMD require

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 的配置选项。他们允许您在外部库上使用 require for browserify 我使用的是 browserify-global-shim。

结论：

npm install --save-dev browserify babelify

可选包

browserify-global-shim

gulp 不是必需的，但对构建有很大帮助

gulp

如何将 es6 导入转换为 AMD require

How to transform the es6 import to AMD require

javascript

frontend

module

ecmascript-6