Импорт класса из модуля - PullRequest
Новая
       36

Импорт класса из модуля

2 голосов
/ 23 июня 2019

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

Uncaught SyntaxError: The requested module './test-class-bundle.js' does not provide an export named 'TestClass' ошибка.

Мой MCVE состоит из следующего:

(1) A test-class.js, который определяет и экспортирует класс TestClass.

(2) Я использую npm и gulp до browsify и babalify test-class.js.

(3) example1.html - это то, что я использую для проверки этого.

тест-class.js 

export class TestClass {
    constructor(greeting){
        this.greeting = greeting;
    }

    greet(){
        console.log(this.greeting);
    }
}

package.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"));

example1.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 лет, поэтому многое из этого является для меня новым. Если кто-то сможет просветить меня, я буду очень признателен. Спасибо!

1 Ответ

1 голос
/ 23 июня 2019

В зависимости от того, какие браузеры вы должны поддерживать, вам не нужны Gulp, Browserify и Babel.Попробуйте импортировать файл JS напрямую, вместо пакета, он работает во всех современных браузерах (Edge, Firefox, Chrome, Safari):

example1.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"> вообще.

...