无法使 ES6 模块中的对象导入与 Gulp、Browserify 和 Babelify 一起使用

Question

我真的很喜欢 ES6 模块，但我很难让它们完全与 Browserify 和增强的对象文字一起工作。

我创建了一个简化的测试用例来总结我的问题。

这是 gulpfile：

var gulp = require('gulp');
var babelify = require('babelify');
var browserify = require('browserify');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');

gulp.task('scripts', function() {
  var b = browserify({
    entries: 'main.js',
    debug: true
  })
  .transform(babelify)

  return b.bundle()
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(gulp.dest('./'));
});

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

其目标是使用 Browserify 转换 ES6 模块并将 ES6 转译为 ES5。

现在，我对基本导入没有任何问题，但我无法使其与对象导入一起使用。假设我有这两个文件：

utils.js

let utils = {
  sayHi() {
    console.log('hi');
  }
}

main.js

import utils from './utils';

utils.sayHi();

这将引发错误：Uncaught TypeError: _utils2.default.sayHi is not a function

此时我找不到任何合适的解决方法。任何帮助将不胜感激！

Answer 1

试试这个：

// utils.js
export default utils = { ... }

// main.js
import utils from './utils';

utils.sayHi();

如果您不默认导出 utils，则必须将导入更改为：

import { utils } from './utils';

Answer 2

您没有从 utils.js 导出任何内容，因此您无法导入任何内容。

如果您希望能够按写入的方式导入对象，则必须将其设置为默认导出：

export default utils;

无法使 ES6 模块中的对象导入与 Gulp、Browserify 和 Babelify 一起使用

Can't make object imports in ES6 modules work with Gulp, Browserify and Babelify

module

gulp

browserify

ecmascript-6

babeljs