Question

我正在尝试从要在浏览器中使用的模块中导入类。为此，我创建了一个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。

（3）test-class.js是我用来测试的。

test-class.js

example1.html

package.json

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

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

gulpfile.js

{
  "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"
  }
}

example1.html

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

目录结构

<!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上启动服务器）进行测试，当从我的浏览器访问服务器时，会在控制台日志中显示给定的错误。

我使用Java脚本已有10多年了，所以对我来说，其中很多是非常新的。如果有人能启发我，我将非常感激。谢谢！

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">。

从模块导入类

1 个答案: