JavaScript 6to5 (teraz Babel) użycie modułu eksportu

Question

Wciąż jestem początkującym, staram się eksportować i importować jedną klasę do pliku głównego, drugiej klasy do pliku klasy drugiej i używać ich.

A potem łyk kodu ES5 z 6to5 (teraz 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(); 

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

A to moja dist/main.js file:

"use strict"; 

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

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

new A(); 

Błąd w konsoli: ReferenceError: require is not defined

Co oczywiście nie działa ... co robię źle lub czego mi jeszcze brakuje? Nie rozumiem tego dokładnie.

Answer 1

Miałem dokładnie ten sam problem przed sobą ... Jak wspomniał Qantas w komentarzach, Babel (dawniej 6to5) konwertuje składnię, ale nie będzie ładować modułów ani polyfills.

Znalazłem najłatwiejszy przepływ pracy przy użyciu browserify z gulp. To zajmuje się transpozycją, dodawaniem polifills, wiązaniem, minifikacją i generowaniem map źródłowych za jednym trafieniem. To pytanie ma całkiem ładny przykład: Gulp + browserify + 6to5 + source maps.

Ta wersja dodaje minifikację i różne produkty. Przykład dla Twojego przypadku będzie wyglądał następująco:

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

Ważne jest, aby uglify miało mangle ustawione na false; to naprawdę nie wydaje się być miłym z przekształconym kodem.

Jeśli nie masz zainstalowane wszystkie zależności, można utworzyć plik package.json, i upewnić się, że następujące pakiety zostały zdefiniowane w obiekcie 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" 
} 

Większość z nich nie będzie działać jeśli zainstalowany -g, więc uważa się ostrzeżony: P

Następnie wystarczy uruchomić npm install zainstalować wszystkie zależności i gulp aby uruchomić zadanie domyślnej i transpile wszystkich kodzie.

Twoje pozostałe pliki wyglądają dobrze, masz dobry pomysł z importowaniem na początku każdego pliku i eksportowaniem ustawień domyślnych :) Jeśli chcesz mieć przykłady babelifikowanych ES6 w środowisku naturalnym, mam couple of projects on GitHub, które mogą ci pomóc.

Answer 2

To wydaje trzeba importować requirejs miłe w HTML tak:

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

Wszystkie pliki muszą być coś takiego:

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

Należy pamiętać, że trzeba umieścić Katalog modułów ./a i ./b na import.

A twój gulpfile muszą być:

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

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

Należy pamiętać, że trzeba przekształcić wszystko w pliku z src/*.js na gulp.src