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

Question

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

然后 gulp 使用 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();

我的gulp文件：

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 with gulp. This takes care of transpiling, adding polyfills, bundling, minification, and source map generation in one hit. This question has a pretty nice example: 。

此版本添加了缩小和 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 文件，并确保在 dependencies 对象中定义了以下包：

"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 的例子，我有一个 couple of projects on GitHub这可能会有所帮助。

Answer 2

看来您需要像这样在 HTML 中导入 requirejs fond:

<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放在import.

你的 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 转换所有文件

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

Javascript 6to5 (now Babel) export module usage

javascript

ecmascript-6

babeljs