Использование экспортного модуля Javascript 6to5 (теперь Babel)

159
19

Я все еще новичок, я пытаюсь экспортировать и импортировать один класс в основной файл, другой класс в файл других классов и использовать их.


И затем gulp код ES5 с 6to5 (теперь 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();


Мой файл 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


Что, конечно же, не работает... что я делаю неправильно или чего не хватает? Я не понимаю.

спросил(а) 2021-01-25T11:06:54+03:00 4 месяца, 3 недели назад
1
Решение
205

У меня была одна и та же проблема перед собой... Как упоминал Qantas в комментариях, Babel (ранее 6to5) преобразует синтаксис, но он не будет загружать модуль или полиполнения.


Я нашел, что самый простой рабочий процесс использует browserify с gulp. Это позаботится о транспиляции, добавлении полилиний, комплектации, минимизации и генерации исходных карт за один удар. Этот вопрос имеет довольно приятный пример: Gulp + браунировать + 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']);


Важно, чтобы 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 были в дикой природе, у меня есть несколько проектов на GitHub, которые могут помочь.

ответил(а) 2021-01-25T11:06:54+03:00 4 месяца, 3 недели назад
-8

Кажется, вам нужно импортировать requirejs fond в свой HTML следующим образом:


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


Обратите внимание, что вам нужно преобразовать весь ваш файл с помощью src/*.js на gulp.src

ответил(а) 2021-01-25T11:06:54+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема