Question

我正在使用gulp + browserify将es6编译为es5，然后在另一个模块中尝试require（这些都不起作用）：

Main = require('mylibrary/dist/main').Main
Main2 = require('mylibrary/dist/main')

还尝试export default class Main并尝试class Main然后export default new Main

我确信这很简单，我不知道了吗？

es6 class：

export class Main {
  constructor(){
    console.log('Main!');
  }

  test(){
    console.log('test');
  }
}

输出（缩写）：

var Main = exports.Main = function () {
  function Main() {
    _classCallCheck(this, Main);

    console.log('Main!');
  }

  _createClass(Main, [{
    key: 'test',
    value: function test() {
      console.log('test');
    }
  }]);

  return Main;
}();

gulpfile.js

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

gulp.task('browserify', function() {
    return browserify({
        entries: ['src/main.js'],
        debug: true
    })
  .transform(babelify, {presets: ["es2015", "react"]})
    .bundle()
  .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('main.js'))
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function() {
    gulp.watch('src/*.js', ['browserify']);
    gulp.watch('src/*.jsx', ['browserify']);
});

gulp.task('default', ['watch','browserify']);

Answer 1

默认情况下，Browserify构建一个旨在在浏览器中运行的文件，而不是用于与require一起使用的文件。您想通过

使用Browserify＆＃39; standalone选项

return browserify({
    entries: ['src/main.js'],
    debug: true,
    standalone: 'someName',
})

无法加载带有require的ES6模块

1 个答案: