从模块导入 class

Question

我正在尝试从我想在浏览器中使用的模块中导入 class。为此，我创建了一个 MCVE 来检查我的理解，尽管我得到了一个

Uncaught SyntaxError: The requested module './test-class-bundle.js' does not provide an export named 'TestClass' 错误。

我的 MCVE 包括以下内容：

(1) 定义和导出 class TestClass.

的 test-class.js

(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 上启动了一个服务器，当从我的浏览器访问它时，会导致控制台日志中出现给定的错误。

我已经 10 多年没有使用 Javascript 了，其中很多内容对我来说都是全新的。如果有人能启发我，我将非常感激。谢谢！

Answer 1

根据您必须支持的浏览器，您实际上并不需要 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">。

从模块导入 class

Importing class from module

javascript

node.js

module

browserify

babelify