Javascript 6to5（现在是Babel）导出模块用法

我还是一个初学者，我尝试将一个类导出并导入到主文件中，将另一个类导入到其他类文件中并使用它们

然后用6to5（现在的巴别塔）吞下ES5代码

我的gulpfile：

var gulp = require('gulp');
var to5 = require('gulp-6to5');

gulp.task('default', function () {
  return gulp.src('main.js')
    .pipe(to5())
    .pipe(gulp.dest('dist'));
 });

这是我的

dist/main.js

文件：

"use strict";

var _interopRequire = function (obj) {
  return obj && (obj["default"] || obj);
};

var A = _interopRequire(require("a.js"));

new A();

控制台中的错误：

ReferenceError:require未定义

---

这当然不起作用。。。我做错了什么？我还缺少什么？我不完全明白。

我之前也有同样的问题。。。正如澳航在评论中提到的，Babel（以前的6to5）将转换语法，但不会进行模块加载或多填充

我发现最简单的工作流是使用。这将在一次点击中处理传输、添加多边形填充、绑定、缩小和源地图生成。这个问题有一个很好的例子：

此版本添加了缩小和多边形填充。您的案例示例如下所示：

let gulp = require('gulp');
let browserify = require('browserify');
let babelify = require('babelify');
let util = require('gulp-util');
let buffer = require('vinyl-buffer');
let source = require('vinyl-source-stream');
let uglify = require('gulp-uglify');
let sourcemaps = require('gulp-sourcemaps');

gulp.task('build:demo', () => {
    browserify('./demo/app.js', { debug: true })
    .add(require.resolve('babel-polyfill/dist/polyfill.min.js'))
    .transform(babelify.configure({ presets: ['es2015', 'es2016', 'stage-0', 'stage-3'] }))
    .bundle()
    .on('error', util.log.bind(util, 'Browserify Error'))
    .pipe(source('demo.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(uglify({ mangle: false }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./demo'));
});

gulp.task('default', ['build:demo']);

重要的是，丑八怪将mangle设置为false；对于转换后的代码，它似乎真的不起作用

如果没有安装所有依赖项，则可能需要创建一个

package.json

文件，并确保在对象中定义以下包：

如果安装< <代码> -g>代码>，大部分都不会起作用，所以请自行警告：P

然后，只需运行

npm install

安装所有依赖项，然后运行

gulp

运行默认任务并传输所有代码

---

您的其他文件看起来不错，您在每个文件的开头导入并导出默认值的想法是正确的：）如果您想要一些babelified ES6的示例，我有一个可能会有所帮助的方法。

似乎您需要像这样导入HTML中的requirejs：

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>

// file a.js
import B from './b';

class A {
  constructor() {
    B.methodB = function() {

    };
  }
}

export default A;


// file b.js
class B {
  methodB() {
    console.log('hi from b');
  }
}

export default B;

// main.js
import A from './a';

new A();

请注意，您需要将模块的目录

/a

和

/b

放在

导入

上

您的gulpfile需要：

var gulp = require('gulp');
var to5 = require('gulp-6to5');

gulp.task('default', function () {
  return gulp.src('src/*.js')
    .pipe(to5())
    .pipe(gulp.dest('dist'));
 });

---

请注意，您需要使用

gulp.src

上的

src/*.js

转换所有文件。您仍然需要一种从浏览器获取模块的方法，6to5不会将文件组合在一起。我如何使用gulp实现这一点/你可以使用像or.Erm，no.Require.js这样的绑定器，它与CommonJS

Require

无关。好吧，RequireJs就是一个例子。我的意思是，您需要一些库，在浏览器的

窗口

对象上为您创建

require

函数。

// file a.js
import B from './b';

class A {
  constructor() {
    B.methodB = function() {

    };
  }
}

export default A;


// file b.js
class B {
  methodB() {
    console.log('hi from b');
  }
}

export default B;

// main.js
import A from './a';

new A();

var gulp = require('gulp');
var to5 = require('gulp-6to5');

gulp.task('default', function () {
  return gulp.src('src/*.js')
    .pipe(to5())
    .pipe(gulp.dest('dist'));
 });