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;

Answer 2

试试这个：

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

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

utils.sayHi();

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

import { utils } from './utils';

不能使ES6模块中的对象导入与Gulp，Browserify和Babelify一起使用

2 个答案: