Импорт класса из модуля
Я пытаюсь импортировать класс из модуля, который хочу использовать в браузере. Для этой цели я создал MCVE, чтобы проверить свое понимание, хотя я получаю
Uncaught SyntaxError: The requested module './test-class-bundle.js' does not provide an export named 'TestClass' ошибка.
Мой MCVE состоит из следующего:
(1) test-class.js, который определяет и экспортирует класс TestClass.
(2) Я использую npm и gulp для browsify и babalify для test-class.js.
(3) example1.html это то, что я использую, чтобы проверить это.
тест-класс.js
export class TestClass {
constructor(greeting){
this.greeting = greeting;
}
greet(){
console.info(this.greeting);
}
}
пакет.json
{
"name": "test-class",
"version": "1.0.0",
"description": "",
"main": "src/js/test-class.js",
"directories": {
"test": "test"
},
"scripts": {
"build": "gulp",
"copyTests": "gulp copyTests",
"startServer": "gulp startServer",
"check": "gulp check"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babelify": "8.0.0",
"browserify": "^16.2.3",
"gulp": "^4.0.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"del": "^4.1.1",
"gulp-rename": "^1.4.0",
"gulp-connect": "^5.7.0",
"vinyl-source-stream": "^2.0.0",
"webpack": "^4.35.0"
}
}
gulpfile.js
//Include required modules
var gulp = require("gulp"),
babelify = require('babelify'),
browserify = require("browserify"),
source = require("vinyl-source-stream"),
connect = require('gulp-connect');
// Convert ES6 code in all js files in src/js folder and copy to
// build folder as bundle.js
gulp.task("build", function(){
return browserify({
entries: ["./src/js/test-class.js"]
})
.transform(babelify.configure({
presets : ["es2015"]
}))
.bundle()
.pipe(source("test-class-bundle.js"))
.pipe(gulp.dest("./build"));
});
//Copy static files from html folder to build folder
gulp.task("copyTests", function(){
return gulp.src("./test/html/*.*")
.pipe(gulp.dest("./build"));
});
//Start a test server with doc root at build folder and
//listening to 9001 port. Home page = http://localhost:9001
gulp.task("startServer", function(){
connect.server({
root : "./build",
livereload : true,
port : 9001
});
});
//Default task. This will be run when no task is passed in arguments to gulp
gulp.task("default", gulp.series("build", "copyTests"));
gulp.task("check", gulp.series("build", "copyTests", "startServer"));
пример1.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
</head>
<body>
<div><h2>Test</h2></div>
<script type = "module">
import {TestClass} from "./test-class-bundle.js";
let testClass = new TestClass("Please work, pretty please!");
testClass.greet();
</script>
</body>
</html>
Структура каталогов
/build
/src
/js
test-class.js
/test
/html
example1.html
Я проверяю это, запуская npm run check, который запускает сервер на localhost:9001, что при доступе из моего браузера приводит к появлению данной ошибки в журнале консоли.
Я не использовал Javascript более 10 лет, так что многое из этого для меня очень ново. Если кто-то может просветить меня, я буду очень признателен. Спасибо!
@RandyCasburn Это очень помогло убрать много шума в моем примере. Если вы добавите свой комментарий в качестве ответа, я проголосую за него. Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В зависимости от того, какие браузеры вы должны поддерживать, вам не нужны Gulp, Browserify и Babel. Попробуйте импортировать файл JS напрямую вместо пакета, он работает во всех современных браузерах (Edge, Firefox, Chrome, Safari):
пример1.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
</head>
<body>
<div><h2>Test</h2></div>
<script type = "module">
import {TestClass} from "./test-class.js";
let testClass = new TestClass("Please work, pretty please!");
testClass.greet();
</script>
</body>
</html>
Если вы должен поддерживаете Internet Explorer 11 и старше, вы вообще не можете использовать <script type = "module">.
Спасибо @PatrickHund, это полезно. В IE 11 можно ли вообще использовать классы? Спасибо!
Нет, классы не поддерживаются в IE11: caniuse.com/#feat=es6-класс
Если вы собираетесь «стать современным» (это хорошо), то, пожалуйста, никогда больше не помещайте код JavaScript между тегами
<script>. вот StackBlitz с правильно построенными модулями. Обратите внимание: нет причин перемещать тег<script>из элемента<head>с помощьюtype = "module", потому что по умолчанию они отложены. stackblitz.com/edit/js-rfn5an