Javascript 6to5(现为Babel)导出模块用法

Question

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

然后用6to5(现在的Babel)吞下ES5代码.

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

class A {
  constructor() {
    B.methodB();
  }
}

export default A;

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

export default B;

// file main.js
import A from 'a.js';
new A();

我的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 is not defined

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

Answer 1

我之前遇到了完全相同的问题...正如Qantas在评论中提到的,Babel(以前的6to5)将转换语法,但它不会进行模块加载或polyfill.

我发现最简单的工作流程是使用browserify和gulp.这需要在一次点击中进行转换,添加polyfill,捆绑,缩小和源地图生成.这个问题有一个很好的例子:Gulp + browserify + 6to5 +源地图.

此版本添加缩小和polyfill.您案例的示例如下所示:

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']);

重要的是uglify将mangle设置为false; 它真的似乎不适合转换后的代码.

如果未安装所有依赖项,则可能需要创建package.json文件,并确保在依赖项对象中定义了以下包:

"devDependencies": {
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.0",
    "babel-preset-es2016": "^6.11.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-3": "^6.11.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
}

如果与其一起安装,大多数都不会起作用-g,所以请考虑自己警告:P

然后,运行npm install以安装所有依赖项,并gulp运行默认任务并转换所有代码.

你的其他文件看起来不错,你有正确的想法,在每个文件的开头导入并导出你的默认值:)如果你想在野外有一些babelified ES6的例子,我在GitHub上有几个可能有帮助的项目.