Javascript 6to5 (jetzt Babel) Export Modul Verwendung

Question

Ich bin immer noch ein Anfänger, ich versuche, eine Klasse in eine Hauptdatei zu exportieren und zu importieren, die andere Klasse in der anderen Klassendatei und sie zu verwenden.

Und dann Schluck ES5-Code mit 6to5 (jetzt Babel).

// 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(); 

Mein 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')); 
}); 

Und das ist meine dist/main.js Datei:

"use strict"; 

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

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

new A(); 

Der Fehler in der Konsole: ReferenceError: require is not defined

Was natürlich nicht funktioniert ... Was mache ich falsch oder was fehlt mir noch? Ich verstehe es nicht genau.

Answer 1

ich genau das gleiche Problem vor mir hatte ... Wie Qantas in den Kommentaren erwähnt, Babel (ehemals 6to5) wird Syntax konvertieren, aber es wird nicht das Laden der Module oder polyfills tun.

Ich habe festgestellt, der einfachste Workflow ist browserify mit gulp. Dies sorgt für das Transpilieren, Hinzufügen von Polyfills, Bündelung, Verkleinerung und Generierung von Quellkarten in einem Treffer. Diese Frage hat ein schönes Beispiel: Gulp + browserify + 6to5 + source maps.

Diese Version fügt Minification und Polyfills hinzu. Ein Beispiel für Ihren Fall würde wie folgt aussehen:

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

Es ist wichtig, dass Uglify mangle auf false gesetzt hat; es scheint wirklich nicht gut mit dem transformierten Code zu spielen.

Wenn Sie nicht alle Abhängigkeiten installiert haben, können Sie eine package.json Datei erstellen möchten, und stellen Sie sicher, dass folgende Pakete im dependencies Objekt definiert sind:

"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" 
} 

dieser meisten wird nicht funktionieren wenn mit -g installiert, so betrachten Sie sich gewarnt: P

Dann führen Sie einfach npm install alle Abhängigkeiten zu installieren, und gulp die Standard-Task ausgeführt werden und alle Ihre Code transpile.

Ihre anderen Dateien sehen gut aus, Sie haben die richtige Idee, wenn Sie am Anfang jeder Datei importieren und Ihre Standardwerte exportieren :) Wenn Sie einige Beispiele für babelifizierte ES6 in freier Wildbahn haben möchten, habe ich eine couple of projects on GitHub, die helfen könnte.

Answer 2

Es ist scheint, dass Sie die requirejs gern in Ihren HTML so importieren müssen:

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

Und Ihre Dateien müssen so etwas wie das:

// 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(); 

Beachten Sie, dass Sie benötigen, die setzen Modulverzeichnis ./a und ./b auf der import.

Und Ihre gulpfile sein müssen:

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

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

Beachten Sie, dass Sie benötigen, um alle Dateien mit src/*.js auf dem gulp.src